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

Question

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

我的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/

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

Answer 1

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

renderer.setClearColorHex( 0x000000, 1 );

在你的threejsinit函数中.将其更改为:

renderer.setClearColorHex( 0xffffff, 1 );

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

renderer.setClearColor( 0xffffff, 0);

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

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

Answer 2

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

Answer 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

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

Answer 4

在 2020 年，使用 r115 可以很好地解决这个问题：

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