改变三个。js背景为透明或其他颜色

I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.

我一直在试图改变我的画布的默认背景颜色，从黑色变成透明，或者其他任何颜色——但是没有运气。

My HTML:

我的HTML:

<canvas id="canvasColor">

My CSS:

我的CSS:

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

As you can see in the following online example I have some animation appended to the canvas, so cant just do a opacity: 0; on the id.

正如您在下面的在线示例中所看到的，我在画布上添加了一些动画，所以不能只做不透明度:0;在id。

Live preview: http://devsgs.com/preview/test/particle/

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

Any ideas how to overwrite the default black?

有什么办法覆盖默认的黑色吗?

4 个解决方案

#1

176

I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:

当我开始使用3的时候，我遇到了这个问题。js。这实际上是一个javascript问题。你目前有:

renderer.setClearColorHex( 0x000000, 1 );

in your threejs init function. Change it to:

在你的threejs init函数中。把它改成:

renderer.setClearColorHex( 0xffffff, 1 );

Update: Thanks to HdN8 for the updated solution:

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

renderer.setClearColor( 0xffffff, 0);

Update #2: As pointed out by WestLangley in another, similar question - you must now use the below code when creating a new WebGLRenderer instance in conjunction with the setClearColor() function:

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

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

Update #3: Mr.doob points out that since r78 you can alternatively use the code below to set your scene's background colour:

更新#3:doob先生指出，由于r78，你可以选择使用下面的代码来设置场景的背景颜色:

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

#2

For transparency, this is also mandatory: renderer = new THREE.WebGLRenderer( { alpha: true } ) via Transparent background with three.js

对于透明性，这也是强制的:renderer = new THREE。WebGLRenderer({alpha: true})通过具有3 .js的透明背景

#3

A full answer: (Tested with r71)

答覆:(以r71测试)

To set a background color use:

设置背景颜色使用:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

If you want a transparent background you will have to enable alpha in your renderer first:

如果你想要一个透明的背景，你必须首先在渲染器中启用alpha:

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

View the docs for more info.

查看文档获取更多信息。

#4

I found that when I created a scene via the three.js editor, I not only had to use the correct answer's code (above), to set up the renderer with an alpha value and the clear color, I had to go into the app.json file and find the "Scene" Object's "background" attribute and set it to: "background: null".

我发现，当我通过三个场景创建一个场景。js编辑器，我不仅要使用正确的答案代码(上面)，用alpha值和clear颜色设置渲染器，我必须进入app.json文件，找到“场景”对象的“背景”属性，并将其设置为:“background: null”。

The export from Three.js editor had it originally set to "background": 0

从三个出口。js编辑器最初设置为“background”:0

#1

176