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

【问题标题】：Changing three.js background to transparent or other color将three.js背景更改为透明或其他颜色
【发布时间】：2013-04-17 02:56:33
【问题描述】：

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

我的 HTML：

<canvas id="canvasColor">

我的 CSS：

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

正如你在下面的在线示例中看到的，我在画布上附加了一些动画，所以不能只做一个 opacity: 0;在身份证上。

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

任何想法如何覆盖默认黑色？

【问题讨论】：

function init() {开头，你的画布是红色的！ Three.js 用setClearColorHex! 将其更改为黑色！

标签： css html canvas html5-canvas three.js

【解决方案1】：

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

renderer.setClearColorHex( 0x000000, 1 );

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

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

更新 #2： 正如 WestLangley 在 another, similar question 中指出的那样 - 现在，在创建新的 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 );

【讨论】：

你确实是对的。画布确实是透明的。默认，真丢人。非常感谢您指出在哪里进行更改 - 现在看起来很棒！
很好，这也困扰了我一点。我在 three.js 脚本中发现这个方法很快就被弃用了，改用 setClearColor(0xffffff, 1)。
setClearColor( 0xffffff, 1) 对我不起作用（使其变为白色），但 setClearColor( 0xffffff, 0) 确实有效（使其透明）
既然r78你可以简单地做scene.background = new THREE.Color( 0xff0000 );
2020 年：scene.background = new THREE.Color( 0xff0000 ); 工作。

【解决方案2】：

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

【讨论】：

【解决方案3】：

完整答案：（使用 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

View the docs 了解更多信息。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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

background-color:#00000000

【讨论】：

【解决方案6】：

在 2020 年使用 r115，它非常适用：

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

【讨论】：

【解决方案7】：

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

【讨论】：