Mapping video.js as a texture in three.js

1.2k views Asked by At

I'm trying to get a stream in HLS with video.js and play it as a videoTexture in a Three.js cube:

<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);

I get the default player correctly playing the stream, but my cube is full white.

THREE.Material: 'map' parameter is undefined.

Any ideas of hoe to pass the video as a texture to three.js?

Thanks.

0

There are 0 answers