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

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

我的HTML:

<canvas id="canvasColor"> 

我的CSS:

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

正如你在下面的在线例子中看到的,我在canvas上添加了一些animation,所以不能只是做一个不透明的:0; 在身份证。

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

任何想法如何覆盖默认的黑色?

当我开始使用three.js时,我遇到了这个问题。 这实际上是一个JavaScript问题。 您目前有:

 renderer.setClearColorHex( 0x000000, 1 ); 

在你的threejs init函数中。 将其更改为:

 renderer.setClearColorHex( 0xffffff, 1 ); 

更新:感谢HdN8更新的解决scheme:

 renderer.setClearColor( 0xffffff, 0); 

更新#2:正如WestLangley在另外一个类似的问题中指出的那样,当创build一个新的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 ); 

对于透明度,这也是强制性的: renderer = new THREE.WebGLRenderer( { alpha: true } )通过透明背景与three.js

完整的答案:(用r71testing)

设置背景颜色使用:

 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编辑器创build一个场景时,我不仅必须使用正确答案的代码(上面),设置具有alpha值和清晰颜色的渲染器,我必须进入应用程序.json文件,并find“场景”对象的“背景”属性,并将其设置为: "background: null"

Three.js编辑器的输出原本是“背景”:0