Search code examples
videothree.jsgeometryplane

Three js add video to plane geometry

I'm trying to display a video into a plane geometry with three js, but all i get is a black rectangle.

var video = document.getElementById('video');
var texture = new THREE.VideoTexture(video);
texture.needsUpdate;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
texture.crossOrigin = 'anonymous';

var imageObject = new THREE.Mesh(
    new THREE.PlaneGeometry(width, height),
    new THREE.MeshBasicMaterial({ map: texture }),);

scene.add( imageObject );

Added:

video.src = "src to video";
video.load();
video.play();

And works!

Solution

  • Solution, add this code:

    video.src = "src to video";
video.load();
video.play();