有没有办法在 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();
}

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