Is there a way to control opacity of scene.background in THREE.js?

Question

In this example I'd like to have a video background that only becomes visible when the camera is in a certain position (for this purpose right now it's indicated by the background color turning black) Is it possible to make it work instead from white to black in terms of fixed HEX opaque colors to white to transparent so that it can reveal for example an background image sequence/video set using CSS?? I'm confident it's a pretty weird and flawed way to tackle this problem but i'm trying different approaches. Here's another one Any suggestions/explantions greatly appreciated!

Answer 1

Sadly, scene.background can only be set to a color, texture, or cubeMap, which means it cannot have an opacity by default.

However, the renderer does have the alpha attribute, which lets you render with transparency when there is no scene.background to cover the transparent parts. With that in mind, you could do something like this:

var renderer = new THREE.WebGLRenderer({
    alpha: true
});

function cameraInPosition() {
    // Removes the colored background
    // allowing you to see video behind the canvas
    scene.background = null;

    // Play whatever video you've placed behind canvas
    playVideoOrSomething();
}

It'll jump from opaque background to transparent, but you'll be able to see the video behind the canvas.