CODEWITHSUNDEEP
javascripthtmlthree.js
Matt Sparrer
Matt Sparrer

Reputation: 349

Is there a way to have transparent video background in Three.js?

I have a greenscreen HTML5 video and want to display it on a plane with a video texture using Three.js.

I tried to use two different video textures ( the video and the alpha channel ) but they are not perfectly synchronized in time and based on what I read it's very hard to sync two HTML5 videos.

I think using .webm video is the way to go but I can't manage to get the alpha channel working with Three.js. Is it possible or is there another way to do it ? Thanks !

var material = new THREE.MeshBasicMaterial( { map: videoTexture, transparent: true } );

Upvotes: 4

Views: 3243

Answers (1)

Matt Sparrer
Matt Sparrer

Reputation: 349

You have to specify the format in order to have the transparency :

texture.format = THREE.RGBAFormat;

Thanks everyone

Upvotes: 6

Related Questions