将 Three.js 背景更改为透明或其他颜色

Question

我一直在尝试将画布的默认背景颜色从黑色更改为透明/任何其他颜色 - 但没有运气。

我的 HTML：

<canvas id="canvasColor">

我的CSS：

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

正如您在下面的在线示例中看到的，我在画布上附加了一些动画，因此不能只执行不透明度：0；就在身份证上。

实时预览： http://devsgs.com/preview/test/article/

有什么想法如何覆盖默认的黑色吗？

Answer 1

当我开始使用 Three.js 时，我也遇到了这个问题。这实际上是一个javascript问题。您目前拥有：

renderer.setClearColorHex( 0x000000, 1 );

在你的

threejs

init 函数中。更改为：

renderer.setClearColorHex( 0xffffff, 1 );

更新： 感谢 HdN8 提供更新的解决方案：

renderer.setClearColor( 0xffffff, 0);

更新 #2： 正如 WestLangley 在 另一个类似问题中指出的那样 - 现在，在与

setClearColor()

函数结合创建新的 WebGLRenderer 实例时，必须使用以下代码：

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

更新＃3：Mr.doob指出，从

r78

开始，您也可以使用下面的代码来设置场景的背景颜色：

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Answer 2

完整答案：（使用 r71 测试）

要设置背景颜色，请使用：

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

如果你想要透明背景，你必须首先在渲染器中启用 Alpha：

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

查看文档了解更多信息。

Answer 3

为了透明度，这也是强制性的：

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

通过透明背景与三.js

Answer 4

2020年，使用r115，配合这个效果很好：

const renderer = new THREE.WebGLRenderer({ alpha: true });
const scene = new THREE.Scene();
scene.background = null;

Answer 5

我发现，当我通过 Three.js 编辑器创建场景时，我不仅必须使用正确答案的代码（上面）来设置具有 alpha 值和清晰颜色的渲染器，我还必须进入app.json 文件并找到“Scene”对象的“background”属性并将其设置为：

"background: null"

。

Three.js 编辑器的导出最初设置为“背景”：0

Answer 6

设置渲染器清晰颜色 用下面的代码

 renderer.setClearColor( 0x000000, 1 );

Answer 7

我还想补充一点，如果使用 Three.js 编辑器，不要忘记在 index.html 中将背景颜色设置为清除。

background-color:#00000000