<center>
<label for="slider">
  camera position
</label>
<input id="slider" type="range" value="0"/></br>

<label for="showWireFrames">
  show wireframes
</label>
<input id="showWireFrames" type="checkbox" checked="true" onchange="toggleWireFrames()"/></br>

<label for="applyTexture">
  apply video texture
</label>
<input id="applyTexture" type="checkbox" value="0" onchange="applyVideoTexture()"/></br>
</center>
canvas {
  margin: 0 auto;
  display: block;
}
let start = new THREE.Vector2();
let end = new THREE.Vector2();
let delta = new THREE.Vector2();
let euler = new THREE.Euler();
let orientation = new THREE.Quaternion();
let phi = 0, theta = 0;


let renderer = new THREE.WebGLRenderer({antialias: false});
let camera = new THREE.PerspectiveCamera(50, 500/500, 1, 1100);
let light = new THREE.PointLight(0xFFFFFF);
let videoElement = document.createElement('video');

videoElement.src = 'https://vp.nyt.com/video/360/mp4/yemen.mp4';

videoElement.crossOrigin = 'anonymous';
videoElement.autoplay = true;
videoElement.muted = true;

light.position.set(-30, 50, 100).normalize();

let texture = new THREE.VideoTexture(videoElement);

texture.needsUpdate = true;

let scene = new THREE.Scene();

let material = new THREE.MeshBasicMaterial({map: texture, wireframe: false});
let material2 = new THREE.MeshLambertMaterial({color: 0xCC0000});
material.side = THREE.DoubleSide;
let geometry = new THREE.SphereGeometry(1, 25, 25);
geometry.scale(-1, 1, 1);
let interacting = false;
let mesh = new THREE.Mesh(geometry, material2);
let edges = new THREE.WireframeHelper(mesh, 0x00FF00);
// edges.material.linewidth = 1;
scene.add(edges);
scene.add(camera);
scene.add(mesh);
scene.add(light);


renderer.setClearColor(0x000);
renderer.setSize(400, 400);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

(function render() {
  let loop = () => {
    if (!interacting) theta -= 0.001;
    let current = slider.value * 2.5 / 100;
    camera.position.z = 3 - current;
    euler.set(-phi, -theta, 0, 'YXZ');
    orientation.setFromEuler(euler);
    mesh.quaternion.copy(orientation);
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
  }
  loop();
})();
renderer.domElement.addEventListener('mousedown', (event) => {
  event.preventDefault();
  interacting = true;
  start.set(event.clientX, event.clientY);
});

let applyVideoTexture = () => {
  mesh.material = applyTexture.checked ? material : material2;

}

let toggleWireFrames = () => {
  edges.visible = showWireFrames.checked;
}

renderer.domElement.addEventListener('mousemove', (event) => {
  event.preventDefault();
  if (!interacting) return;

  end.set(event.clientX, event.clientY);
  delta.subVectors(end, start);
  start.copy(end);
  phi += 2 * Math.PI * delta.y / renderer.getSize().height * -0.3;
  theta += 2 * Math.PI * delta.x / renderer.getSize().width * -0.5;
});

renderer.domElement.addEventListener('mouseup', (event) => {
  interacting = false;
});
View Compiled
Rerun