Javascript 将video.js映射为three.js中的纹理

我正在尝试使用video.js在HLS中获取流，并将其作为videoTexture在Three.js多维数据集中播放：

<video id=example-video width=960 height=400 class="video-js vjs-default-skin" controls>
    <source
         src="//s3.amazonaws.com/_bc_dml/example-content/tears-of-steel/playlist.m3u8"
         type="application/x-mpegURL">
    </video>

        <script src="//vjs.zencdn.net/5.4/video.js"></script>
    <script src="js/videojs-contrib-hls.min.js"></script>
    <script src="js/three.min.js"></script>
    <script>
        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);

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（75，window.innerWidth/window.innerHeight，0.11000）；
var player=videojs（'example-video'）；
player.play（）；
var纹理=三。视频纹理（播放器）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var geometry=新的3.BoxGeometry（1,1,1）；
var material=new THREE.MeshBasicMaterial（{color:0xffffff，map:texture}）；
var cube=新的三个网格（几何体、材质）；
场景.添加（立方体）；
{...}
渲染器。渲染（场景、摄影机）；

我得到了正确播放流的默认播放器，但我的立方体是全白色的

三、材质：“贴图”参数未定义

hoe想把视频作为纹理传递给three.js吗

---

谢谢。

最后，我决定将MPEG DASH与Shaka播放器一起使用，而不是HLS。我试过了，我可以让它更容易地工作。事实上，沙卡也很失望。真正有效的是dash.js