0
votes

I'm trying to map a video texture onto a geometry in three.js using a video texture, but it only works when I set wireframe to true on my material (I see the video playing on the mesh, but with wireframes). As soon as I turn it to false, I see nothing (just a black canvas). I'm trying to figure out why that would be, any ideas?

My video is an html tag:

<video id="videoV">
    <source src="shot13.mp4" type="video/mp4">
</video>

This is my javascript:

var renderer = new THREE.WebGLRenderer();

    video = document.getElementById( 'videoV' );
    texture = new THREE.VideoTexture( video );

    var material = new THREE.MeshLambertMaterial( {
        color: 0xffffff,
        map: texture, 
        **wireframe: true**
        } );

    geometry = new THREE.BoxGeometry(80, 800, 800);

    var plane = new THREE.Mesh( geometry, material);
    scene.add(plane);
2
Try MeshBasicMaterial, instead. - WestLangley
Good idea, just tried though and it didn't change anything. Thanks - davidvjc

2 Answers

0
votes

Try updating the following line:

v = new THREE.VideoTexture( video );
texture = v.texture; 

The texture is a member of VideoTexture.

0
votes

I solved it.

The problem was that I didn't make the texture double-sided as I was inside the BoxGeometry. So when I set wireframe = "true", I saw the black inside of the cube.

This solved it:

    var material = new THREE.MeshBasicMaterial( {
        map: texture, 
        side: THREE.DoubleSide
    } );

Hope this helps anyone!