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

Question

我一直在尝试将画布默认的背景色从黑色更改为透明或其他颜色，但没有成功。

我的HTML：

<canvas id="canvasColor">

我的 CSS：

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

如您在下面的在线示例中所看到的，我在画布上附加了一些动画，因此不能仅对该id执行opacity: 0;。

在线预览：http://devsgs.com/preview/test/particle/

有什么想法可以覆盖默认的黑色吗？

- user1231561

---

在 function init() { 的开头，你的画布是红色的！Three.js 通过 setClearColorHex 将其更改为黑色！ - Simon Sarris

Answer 1

我在开始使用three.js时也遇到了这个问题。实际上，这是一个JavaScript的问题。你目前的代码如下：

renderer.setClearColorHex( 0x000000, 1 );

在你的threejs初始化函数中。请将其更改为：

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

更新 #2：正如WestLangley在另一个类似的问题中指出的那样——在创建新的WebGLRenderer实例时，您现在必须使用以下代码与setClearColor()函数一起使用：

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

- Joe

---

好的，这让我有点苦恼。我在three.js脚本中发现，这种方法即将被弃用，请使用setClearColor(0xffffff, 1)替代它。 - HdN8

setClearColor(0xffffff, 1) 对我没用（使它变成白色），但 setClearColor(0xffffff, 0) 却有效（使它透明）。 - Ronen Rabinovici

感谢Ronen - 最初的问题是关于更改背景颜色为任何颜色，但像您一样，大多数人来到这里可能想要使其透明。我已更新代码，使背景颜色的不透明度为0。 - Joe

从 r78 开始，您可以简单地执行 scene.background = new THREE.Color( 0xff0000 );。 - mrdoob

2020年：scene.background = new THREE.Color( 0xff0000 );是有效的。 - Avatar

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

查看文档以获取更多信息。

- Yotam Omer

Answer 3

为了透明度，这也是强制性的：renderer = new THREE.WebGLRenderer( { alpha: true } ) 通过 透明背景与three.js。

- Peter Ehrlich

Answer 4

在2020年使用r115版本时，以下内容表现非常优秀：

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

- Darkwing

Answer 5

我发现当我通过three.js编辑器创建场景时，不仅需要使用正确的答案代码（如上所示）来设置带有alpha值和清除颜色的渲染器，而且还要进入app.json文件，并找到“Scene”对象的“background”属性并将其设置为："background: null"。

从Three.js编辑器导出时，它最初设置为"background": 0。

- iethatis

Answer 6

设置渲染器清除颜色 使用以下代码 renderer.setClearColor( 0x000000, 1 );

- It's Joker

Answer 7

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

background-color:#00000000

- Ty Irvine