有没有办法控制 THREE.js 中 scene.background 的不透明度？

Question

在此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任何suggestions/explantions不胜感激！

Answer 1

遗憾的是，scene.background只能设置to a color, texture, or cubeMap，这意味着它默认不能有不透明度。

然而，renderer 确实有 alpha 属性，当没有 scene.background 覆盖透明部分时，它可以让你渲染透明。考虑到这一点，您可以这样做：

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();
}

它会从不透明背景跳到透明背景，但您将能够看到 canvas 后面的视频。

有没有办法控制 THREE.js 中 scene.background 的不透明度？

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

background

opacity

three.js