A ThreeJS extension for live "Green Screening" of video. Simply include this extension and then use the THREEx.ChromaKeyMaterial(videoName, chromaKeyColor)
as your material. Then in your "animate" loop, update your material with the latest frame from your video using myGreenScreenMaterial.update()
.
Creating an object
//0xd432 is the green screen color, insert yours, if different, below
var myGreenScreenMaterial = new THREEx.ChromaKeyMaterial("images/myVideo.mp4", 0xd432);
var myGeometry = new THREE.PlaneBufferGeometry( 5, 5);
var myGreenScreenVideoObject = new THREE.Mesh( myGeometry, myGreenScreenMaterial );
scene.add( myGreenScreenVideoObject );
Updating the video frame
myGreenScreenMaterial.update();
Make sure you remember to start your video as well! Autoplaying should work fine.