Skip to content

Latest commit

 

History

History
20 lines (16 loc) · 876 Bytes

README.md

File metadata and controls

20 lines (16 loc) · 876 Bytes

Threex.chromakey

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().

Example Usage

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.