Changing three.js background to transparent or other color

Question

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?

At the beginning of `function init() {`, your canvas is red! Three.js changes it to black with `setClearColorHex`! — Simon Sarris, Apr 23 '13 at 20:47

score 323 · Accepted Answer · edited May 23 '17 at 12:02

323

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

edited May 23 '17 at 12:02

Community

1
1

answered Apr 23 '13 at 19:02

Joe

15,205
8
49
56

You are indeed right. The canvas is indeed transparent pr. default, so shame on me. Thanks a lot for pointing out where to change this - it looks great now! – user1231561 Apr 23 '13 at 22:38
5

Nice, this bugged me for a bit too. I found in the three.js script this method is soon deprecated, use setClearColor( 0xffffff, 1) instead. – HdN8 Jan 09 '14 at 15:34
@HdN8 - thanks for update, I've added it to the answer. – Joe Jan 09 '14 at 16:00
1

setClearColor( 0xffffff, 1) did not work for me (made it white) but setClearColor( 0xffffff, 0) did work (made it transparent) – Ronen Rabinovici Nov 08 '15 at 05:59
Thanks Ronen - the original question was about changing the background to any colour but, like you, most people coming here probably want to make it transparent. I've updated the code so that the background colour's opacity is 0. – Joe Nov 09 '15 at 20:24
20

Since `r78` you can simply do `scene.background = new THREE.Color( 0xff0000 );` – mrdoob Aug 17 '16 at 20:52
3

Year 2020: `scene.background = new THREE.Color( 0xff0000 );` worked. – Avatar Oct 08 '20 at 12:45

score 32 · Answer 2 · edited Dec 13 '17 at 14:42

A full answer: (Tested with 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:

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.

score 23 · Answer 3 · edited May 23 '17 at 12:02

23

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

edited May 23 '17 at 12:02

Community

1
1

answered Feb 04 '14 at 21:45

Peter Ehrlich

6,969
4
49
65

score 10 · Answer 4 · answered Apr 02 '20 at 19:20

10

In 2020 using r115 it works very good with this:

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

answered Apr 02 '20 at 19:20

Darkwing

140
1
5

score 3 · Answer 5 · answered Oct 19 '17 at 18:54

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".

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

score 1 · Answer 6 · answered Dec 07 '21 at 13:42

1

Set renderer clear colour With the below code renderer.setClearColor( 0x000000, 1 );

answered Dec 07 '21 at 13:42

It's Joker

65
10

score -1 · Answer 7 · edited Sep 14 '18 at 03:27

-1

I'd also like to add that if using the three.js editor don't forget to set the background colour to clear as well in the index.html.

background-color:#00000000

edited Sep 14 '18 at 03:27

Stephen Rauch

47,830
31
106
135

answered Sep 14 '18 at 03:09

Ty Irvine

1

Changing three.js background to transparent or other color

7 Answers7

Linked

Related