user1231561 user1231561 - 3 months ago 225
CSS Question

Changing three.js background to transparent or other color

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:

<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 some animation appended to the canvas, so cant just do a opacity: 0; on the id.

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

Any ideas how to overwrite the default black?

Joe Joe
Answer

I came across this when I started using three.js as well. It's actually a javascript issue. You currently 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 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:

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:

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