Skip to content

A ThreeJS extension for live "Green Screening" of video

License

Notifications You must be signed in to change notification settings

hawksley/Threex.chromakey

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 

Repository files navigation

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.

About

A ThreeJS extension for live "Green Screening" of video

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published