title: How to render multiple videos on a sphere using three.js
body: <p>Three.js is new to me, so I am a bit stuck on this.</p>
  
  <p>I read the answer to this question: <a href="https://stackoverflow.com/questions/20350251/using-multiuple-textures-on-a-sphere-three-js">Using multiuple textures on a sphere [Three.js]</a></p>
  
  <p>The answer suggests the user to use a cube to load the textures on, instead of sphere.That being done, the cube can be expanded to a sphere.</p>
  
  <pre><code>var geometry = new THREE.BoxGeometry( 1, 1, 1, 8, 8, 8 );
  for ( var i in geometry.vertices ) {
      var vertex = geometry.vertices[ i ];
      vertex.normalize().multiplyScalar(radius);
  }
  
  var materialArray = [];
  var faceMaterial = new THREE.MeshLambertMaterial({
      color: sphereColor,
      transparent: true,
      opacity: 0.4
  });
  for (var i = 0; i &lt; 6; i++) {
      materialArray.push(faceMaterial);
  }
  
  var material = new THREE.MeshFaceMaterial(materialArray);
  var sphere = new THREE.Mesh( geometry, material );
  scene.add( sphere );
  </code></pre>
  
  <p>Will the same thing work for videos? If I wish to play six videos on a sphere, should I load the 'video' texture onto the six faces of the cube and then expand it to a sphere.</p>
  
  <p>EDIT:</p>
  
  <p>I have the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
      &lt;title&gt;three.js webgl - equirectangular video panorama&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;
      &lt;style&gt;
          body {
              background-color: #000000;
              margin: 0px;
              overflow: hidden;
          }
  
          #info {
              position: absolute;
              top: 0px; width: 100%;
              color: #ffffff;
              padding: 5px;
              font-family:Monospace;
              font-size:13px;
              font-weight: bold;
              text-align:center;
          }
  
          a {
              color: #ffffff;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="container"&gt;&lt;/div&gt;
  
      &lt;script src="three.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
  
          var camera, scene, renderer;
  
          var texture_placeholder,
          isUserInteracting = false,
          onMouseDownMouseX = 0, onMouseDownMouseY = 0,
          lon = 0, onMouseDownLon = 0,
          lat = 0, onMouseDownLat = 0,
          phi = 0, theta = 0,
          distance = 500;
  
          init();
          animate();
  
          function init() {
  
              var container, mesh;
  
              container = document.getElementById( 'container' );
  
              camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
              camera.target = new THREE.Vector3( 0, 0, 0 );
  
              scene = new THREE.Scene();
  
              //var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
              //geometry.scale( - 1, 1, 1 );
  
              var geometry = new THREE.BoxBufferGeometry( 1,1,1,32,32,32 );
              geometry.scale( - 1, 1, 1 );
              for ( var i in geometry.vertices ) {
                      var vertex = geometry.vertices[ i ];
                  vertex.normalize().multiplyScalar(distance);
              }
  
              //var video = document.createElement( 'video' );
              //video.width = 640;
              //video.height = 360;
              //video.autoplay = true;
              //video.loop = true;
              //video.src = "pano.webm";
  
  
              var path = "vids/";
              var format = '.mp4';
              var urls = [
                      path + 'Row1Col1' + format, path + 'Row1Col2' + format,
                      path + 'Row1Col3' + format, path + 'Row2Col1' + format,
                      path + 'Row2Col2' + format, path + 'Row2Col3' + format
                  ];
  
              var reflectionCube = new THREE.CubeTextureLoader().load( urls );
              reflectionCube.minFilter = THREE.LinearFilter;
              reflectionCube.format = THREE.RGBFormat;
  
              //var texture = new THREE.VideoTexture( video );
              //texture.minFilter = THREE.LinearFilter;
              //texture.format = THREE.RGBFormat;
  
              //var material   = new THREE.MeshBasicMaterial( { map : texture } );
  
              //mesh = new THREE.Mesh( geometry, material );
  
              //scene.add( mesh );
  
              var materialArray = [];
              var faceMaterial = new THREE.MeshLambertMaterial({
                      color: 0xffff00,
                      transparent: true,
                      opacity: 0.4
              });
  
              for (var i = 0; i &lt; 6; i++) {
                      materialArray.push(faceMaterial);
              }
  
              var material = new THREE.MeshFaceMaterial(materialArray);
              var sphere = new THREE.Mesh( geometry, material );
              scene.add( sphere );
  
              //End of what I have added
  
              renderer = new THREE.WebGLRenderer();
              renderer.setPixelRatio( window.devicePixelRatio );
              renderer.setSize( window.innerWidth, window.innerHeight );
              container.appendChild( renderer.domElement );
  
              document.addEventListener( 'mousedown', onDocumentMouseDown, false );
              document.addEventListener( 'mousemove', onDocumentMouseMove, false );
              document.addEventListener( 'mouseup', onDocumentMouseUp, false );
              document.addEventListener( 'mousewheel', onDocumentMouseWheel, false );
              document.addEventListener( 'MozMousePixelScroll', onDocumentMouseWheel, false);
  
              //
  
              window.addEventListener( 'resize', onWindowResize, false );
  
          }
  
          function onWindowResize() {
  
              camera.aspect = window.innerWidth / window.innerHeight;
              camera.updateProjectionMatrix();
  
              renderer.setSize( window.innerWidth, window.innerHeight );
  
          }
  
          function onDocumentMouseDown( event ) {
  
              event.preventDefault();
  
              isUserInteracting = true;
  
              onPointerDownPointerX = event.clientX;
              onPointerDownPointerY = event.clientY;
  
              onPointerDownLon = lon;
              onPointerDownLat = lat;
  
          }
  
          function onDocumentMouseMove( event ) {
  
              if ( isUserInteracting === true ) {
  
                  lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
                  lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
  
              }
  
          }
  
          function onDocumentMouseUp( event ) {
  
              isUserInteracting = false;
  
          }
  
          function onDocumentMouseWheel( event ) {
  
              // WebKit
  
              if ( event.wheelDeltaY ) {
  
                  distance -= event.wheelDeltaY * 0.05;
  
              // Opera / Explorer 9
  
              } else if ( event.wheelDelta ) {
  
                  distance -= event.wheelDelta * 0.05;
  
              // Firefox
  
              } else if ( event.detail ) {
  
                  distance += event.detail * 1.0;
  
              }
  
          }
  
          function animate() {
  
              requestAnimationFrame( animate );
              update();
  
          }
  
          function update() {
  
              lat = Math.max( - 85, Math.min( 85, lat ) );
              phi = THREE.Math.degToRad( 90 - lat );
              theta = THREE.Math.degToRad( lon );
  
              camera.position.x = distance * Math.sin( phi ) * Math.cos( theta );
              camera.position.y = distance * Math.cos( phi );
              camera.position.z = distance * Math.sin( phi ) * Math.sin( theta );
  
              camera.lookAt( camera.target );
  
              /*
              // distortion
              camera.position.copy( camera.target ).negate();
              */
  
              renderer.render( scene, camera );
  
          }
  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>However, it does not work. After I host it on the web there's just a black screen. Can you tell me where am I going wrong?</p>