Skip to content

 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99

Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Webcam Branch


The Webcam branch demonstrates,

  • using a Webcam video feed as a texture for a THREE.Mesh,
  • using the THREE.ShaderMaterial to adjust the colors to apply a Green Screen option allowing you to select the key color, similarity and smoothness to create the alpha channel in the texture.
  • using the Dat.GUI to modify the THREE.ShaderMaterial properties in real time.

To load the Webcam example, checkout the webcam branch.

git clone

cd Three.js-TypeScript-Boilerplate

git checkout webcam 

npm install

npm run dev