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

我一直试图改变什么似乎是我的画布的默认背景颜色从黑色到透明/任何其他颜色-但没有运气。

我的 HTML:

<canvas id="canvasColor">

我的 CSS:

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

正如你可以在下面的在线例子中看到的，我有一些动画附加到画布，所以不能只做一个不透明度: 0; 在 id 上。

现场预览: Http://devsgs.com/preview/test/particle/

有办法覆盖默认的黑色吗？

179796 次浏览
小开
最佳答案

当我开始使用 three. js 的时候遇到了这个问题，实际上是 javascript 的问题，你现在有:

renderer.setClearColorHex( 0x000000, 1 );

在你的 threejs初始化函数。改变它为:

renderer.setClearColorHex( 0xffffff, 1 );

更新: 感谢 HdN8的更新解决方案:

renderer.setClearColor( 0xffffff, 0);

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

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

Doob 先生指出，自从 r78以来，你可以选择使用下面的代码来设置场景的背景颜色:

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

为了透明度，这也是强制性的: renderer = new THREE.WebGLRenderer( { alpha: true } )通过 具有三个 js 的透明背景

小开

完整答案: (用 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

查看文档 了解更多信息。

小开

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

Js 编辑器的导出最初将其设置为“ back”: 0

小开

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

background-color:#00000000
小开

到2020年，使用 r115的效果非常好:

Const Renderer = new THREE.WebGLRenderer ({ alpha: true }) ; 场景() ; 画面背景 = 空;

小开

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


提交答案