examples/example48.html

<!DOCTYPE html>
<html>
 <head> 
  <title>Example 45 - Canvas texture</title> 
  <style>
    body{
      margin: 0;
      overflow: hidden;
    }

    #stats {  /* Align stats top-left */
      position: absolute;
      left: 0px;
      top: 0px;
    }

    #video {
      display: none; 
      position: absolute; 
      left 10px: 15px; 
      bottom: 10px;
    }
  </style>
  </head>
  <body>
    <video id="video" src="assets/movies/Big_Buck_Bunny_small.ogv" controls="true" autoplay="true"></video> 
    <!-- JavaScript libraries -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
    <!-- Javascript code that runs our Three.js examples --> 
    <script type="text/javascript">
    
      // once everything is loaded, we run our Three.js stuff.
      $(function () {
        var stats = initStats();
        var texture;
        var $video = $('#video');
        var video = $video[0];

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var webGLRenderer = new THREE.WebGLRenderer();
        webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
        webGLRenderer.setSize(window.innerWidth, window.innerHeight);
        webGLRenderer.shadowMapEnabled = true;

        texture = new THREE.Texture(video);
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        texture.format = THREE.RGBFormat;
        texture.generateMipmaps = false;

        var cube;
        cube = createMesh(new THREE.BoxGeometry(22, 16, 0.5));
        cube.position.y = 2;
        scene.add(cube);

        // position and point the camera to the center of the scene
        camera.position.x = 00;
        camera.position.y = 1;
        camera.position.z = 28;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        var ambiLight = new THREE.AmbientLight(0x141414)
        scene.add(ambiLight);

        var light = new THREE.DirectionalLight();
        light.position.set(0, 30, 20);
        scene.add(light);

        // add the output of the renderer to the html element
        $('body').append(webGLRenderer.domElement);

        // call the render function
        var step = 0;

        // setup the control gui
        var controls = new function () {
          this.showVideo = false;
          this.rotate = false;

          this.showCanvas = function () {
            if (controls.showVideo) {
              $video.show();
            } else {
              $video.hide();
            }
          }
        };

        var gui = new dat.GUI();
        gui.add(controls, "rotate");
        gui.add(controls, "showVideo").onChange(controls.showCanvas);

        render();

        function createMesh (geom) {
          var materialArray = [];
          materialArray.push(new THREE.MeshBasicMaterial({ color: 0x555555  }));
          materialArray.push(new THREE.MeshBasicMaterial({ color: 0x555555  }));
          materialArray.push(new THREE.MeshBasicMaterial({ color: 0x555555  }));
          materialArray.push(new THREE.MeshBasicMaterial({ color: 0x555555   }));
          materialArray.push(new THREE.MeshBasicMaterial({ map: texture }));
          materialArray.push(new THREE.MeshBasicMaterial({ color: 0xeeee33  }));
          var faceMaterial = new THREE.MeshFaceMaterial(materialArray);

          // create a multimaterial
          var mesh = new THREE.Mesh(geom, faceMaterial);

          return mesh;
        }

        function render () {
          stats.update();

          if (video.readyState === video.HAVE_ENOUGH_DATA) {
              if (texture) texture.needsUpdate = true;
          }

          if (controls.rotate) {
            cube.rotation.x += 0.01;
            cube.rotation.y -= 0.02;
            cube.rotation.z += 0.01;
          }

          // render using requestAnimationFrame
          requestAnimationFrame(render);
          webGLRenderer.render(scene, camera);
        }

        function initStats() {
          stats = new Stats();
          stats.setMode(0); // 0: fps, 1: ms
          $('body').append(stats.domElement);
          return stats;
        }
      });
    </script>   
  </body>
</html>