Search code examples
csshtmlcanvashtml5-canvasthree.js

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?

Solution

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

    // in your three.js init function
renderer.setClearColorHex( 0x000000, 1 );

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