Управление видимостью фонового видео с помощью THREE.Vector3 и OrbitControls.js

Question

У меня есть этот пример , который пользователь stackoverflow Marquizzo помог мне развить.То, что он хотел бы изменить, это то, что вместо изменения цвета фона в зависимости от положения камеры, я хотел бы иметь видео с коротким зацикленным фоном, который становится видимым только в положении, которое сейчас в примере делает фон постепенно черным.

Дополнительными функциями будут увеличение громкости звука таким же образом, а также активация невидимой точки доступа (также только в том же диапазоне положения камеры) для нажатия / касания, которое перенаправляет на другую страницу.

Ниже приведен код, который влияет на цвет фона прямо сейчас:

var vantagePoint = new THREE.Vector3(6.8, 0.6, -1.8);
var distance = 100;
var normalized = 1;
var endColor = new THREE.Color(0xffffff);
var startColor = new THREE.Color(0x000000);
scene.background = startColor;



function animate() {
		
		distance = vantagePoint.distanceTo(camera.position);
   normalized = THREE.Math.smoothstep(distance, 0.3, 2); // Converts [1, 100] => [0, 1]

   // Resets the color on each frame
   startColor.set(0xf000000);
   startColor.lerp(endColor, normalized);

	render();
	requestAnimationFrame( animate );

	


	}