Change the background of three.js to transparent or another color

Question

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

My HTML:

<canvas id="canvasColor"> 

My 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 an animation attached to the canvas, so I can not make the opacity: 0; on the identifier.

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

Any ideas on how to overwrite the default black color?

Answer 1

I came across this when I started using tr .js. This is actually a javascript issue. You have:

 renderer.setClearColorHex( 0x000000, 1 ); 

in your threejs init function. Change it to:

 renderer.setClearColorHex( 0xffffff, 1 ); 

Update: Thanks to HdN8 for the updated solution:

 renderer.setClearColor( 0xffffff, 0); 

Update # 2: As WestLangley noted in another, similar question - you should now use the code below when creating a new WebGLRenderer instance in combination with the setClearColor() function:

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

Update # 3: Mr.doob indicates that with r78 you can also use the code below to set the background color of the scene:

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

Answer 2

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

Answer 3

Full answer: (Tested with r71)

To set the background color, use:

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

If you need a transparent background, you first need to enable alpha in your renderer:

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

Browse the docs for more information.

Answer 4

I found that when I created the scene through the three.js editor, I not only had to use the correct response code (see above) to set up the render with alpha value and clear color, I had to go to the app.json file and find the attribute "Background" of the "Scene" object and set it: "background: null" .

Export from Three.js editor was originally set to "background": 0