Add video from webcam as background to entire scene

How can I add video stream from my camera to the scene as background?

You can make your THREE.JS canvas transparent and put an HTML video behind it.

Here’s an article about how to put a video stream into an HTML video tag.

1 Like

HTML5 video can also be used as a texture. In three.js, there is a VideoTexture class for this purpose. Check out for an example, which also shades the video. (You should turn the audio volume down before entering the page.) You don’t have to do any custom shading, of course.

Once you have the texture, you can set it as scene.background:

1 Like

Do you mean by passing the alpha: true opiton to WebGLRenderer function alongside with the canvas option.

Is there a difference to that than the way @LisaWy has described. Or are they two different implementations? If so is one is preferable to the other for any reason like performance etc.?

They are different solutions.

You tell us. :wink: