将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
