Skip to content
A ThreeJS extension for live "Green Screening" of video
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE Update Jun 17, 2016
threex.chromakey.js Add files via upload Jun 17, 2016


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


Make sure you remember to start your video as well! Autoplaying should work fine.

You can’t perform that action at this time.