title: Mapping video.js as a texture in three.js
body: <p>I'm trying to get a stream in HLS with video.js and play it as a videoTexture in a Three.js cube:</p>
  
  <pre><code>&lt;video id=example-video width=960 height=400 class="video-js vjs-default-skin" controls&gt;
      &lt;source
           src="//s3.amazonaws.com/_bc_dml/example-content/tears-of-steel/playlist.m3u8"
           type="application/x-mpegURL"&gt;
      &lt;/video&gt;
  
          &lt;script src="//vjs.zencdn.net/5.4/video.js"&gt;&lt;/script&gt;
      &lt;script src="js/videojs-contrib-hls.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/three.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var scene = new THREE.Scene();
          var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
              var player = videojs('example-video');
              player.play();
              var texture =  THREE.VideoTexture(player);
  
          var renderer = new THREE.WebGLRenderer();
          renderer.setSize( window.innerWidth, window.innerHeight );
          document.body.appendChild( renderer.domElement );
  
  
          var geometry = new THREE.BoxGeometry( 1, 1, 1 );
          var material = new THREE.MeshBasicMaterial( { color: 0xffffff, map: texture} );
          var cube = new THREE.Mesh( geometry, material );
          scene.add( cube );
  
          {...}
  
          renderer.render(scene, camera);
  </code></pre>
  
  <p>I get the default player correctly playing the stream, but my cube is full white.</p>
  
  <blockquote>
    <p>THREE.Material: 'map' parameter is undefined.</p>
  </blockquote>
  
  <p>Any ideas of hoe to pass the video as a texture to three.js?</p>
  
  <p>Thanks.</p>