- Install an up-to-date version of Three.js, for example:
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
}
</script>
- Copy the code in the file (chromakey-three-js.js) into your project
Don't forget to create a three.js scene if you don't already have one.
Use case:
// video - is the id video in your HTML
// 0xd432 - is the color you want to remove
const myGreenScreenMaterial = new ChromaKeyMaterial("video", 0xd432);
// for example, we can place the video on a plane
const myGeometry = new THREE.PlaneGeometry(32, 18);
const myGreenScreenVideoObject = new THREE.Mesh(myGeometry, myGreenScreenMaterial);
// don't forget to add to your animate function:
scene.add(myGreenScreenVideoObject);
The code was taken from here and improved for current realities (2023's)
If there are any bugs or bugs write, we will fix :)