有没有一种方法可以控制THREE.js中scene.background的不透明度？

Question

在此example中，我希望有一个视频背景，该背景仅在相机处于某个位置时才可见（为此目的，背景颜色变为黑色表示）。使它从固定的十六进制不透明颜色变为白色至透明，从白色到黑色起作用，以便它可以显示例如使用CSS的背景图像序列/视频集？ ？我相信这是解决这个问题的一种很怪异和有缺陷的方法，但是我正在尝试不同的方法。这是另一个one，非常感谢您提出的任何建议/建议！

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

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