<label for="slider">
  camera position
</label>
<input id="slider" type="range" value="0"/></br>
<label for="segments">
  segments
</label>
<input id="segments" type="range" placeholder="segments" oninput="change()" value="0"/></br> 

<label for="wireframes">
  show wireframes
</label>
<input id="wireframe" type="checkbox" checked="true" onchange="changeWireframe()"/> <br/>
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 canvasElements = [1,2,3,4,5,6].map(() => {
  let canvas = document.createElement('canvas');
  canvas.height = 512;
  canvas.width = 512;
  return canvas;
});
let contexts = canvasElements.map((canvas) => canvas.getContext('2d'));
let frames = [
            [0, 0],
            [512, 0],
            [1024, 0],
            [0, 512],
            [512, 512],
            [1024, 512]
];


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

videoElement.width = 400;
videoElement.controls = true;

videoElement.src = 'https://vp.nyt.com/video/360/mp4/yemen-cubemap.mp4';
videoElement.crossOrigin = 'anonymous';
videoElement.pause()
light.position.set(-30, 50, 100).normalize();

let texture = new THREE.VideoTexture(videoElement);

texture.needsUpdate = true;

let scene = new THREE.Scene();
let materials = [0, 1,2,3,4,5].map((i) => {
  let material = new THREE.MeshBasicMaterial({map: new THREE.Texture(canvasElements[i]) })
  material.side = THREE.DoubleSide;
  return material;
  });

let material = new THREE.MeshFaceMaterial(materials);
// let material =
//   new THREE.MeshLambertMaterial({color: 0xCC0000});

let geometry = new THREE.BoxGeometry(5, 5, 5, 1, 1, 1);
geometry.scale(-1, 1, 1);

// let otherGeometry = new THREE.SphereGeometry(4, 25, 25);

for (var i = 0; i < geometry.vertices.length; i++) {
  let v = geometry.vertices[i];
  v.normalize();
  geometry.vertices[i].set(v.x * 5, v.y * 5, v.z * 5);
}

let interacting = false;
let mesh = new THREE.Mesh(geometry, material);
mesh.visible = true;
let edges = new THREE.WireframeHelper( mesh, 0x0000ff);
edges.material.linewidth = 2;

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);
camera.position.z = 15;
material.side = THREE.DoubleSide;
geometry.dynamic = true;
function change() {
  let value = parseInt(segments.value, 10) * 20 / 100;
  mesh.geometry = new THREE.BoxGeometry(5, 5, 5, value, value, value);
  mesh.geometry.scale(-1, 1, 1);

  

  for (var i = 0; i < mesh.geometry.vertices.length; i++) {
    let v = mesh.geometry.vertices[i];
    v.normalize();
    mesh.geometry.vertices[i].set(v.x * 5, v.y * 5, v.z * 5);
  }
  geometry.verticesNeedUpdate = true;
  edges.geometry = mesh.geometry;
}
(function render() {
  let loop = () => {
    if (!interacting) theta -= 0.009;
    let current = slider.value * 15 / 100;
    camera.position.z = 15 - current;
    euler.set(-phi, -theta, 0, 'YXZ');
    orientation.setFromEuler(euler);
    mesh.quaternion.copy(orientation);
    renderer.render(scene, camera);
    
    frames.forEach((frame, i) => {
      contexts[i].clearRect(0, 0, 512, 512);
      contexts[i].drawImage(videoElement, frame[0], frame[1], 512, 512, 0, 0, 512, 512);
      materials[i].map.needsUpdate = true;
    });    
    
    requestAnimationFrame(loop);
  }
  loop();
})();
renderer.domElement.addEventListener('mousedown', (event) => {
  event.preventDefault();
  interacting = true;
  start.set(event.clientX, event.clientY);
});

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;
});
document.body.appendChild(videoElement);

function changeWireframe() {
  edges.visible = wireframe.checked
}
View Compiled
Rerun