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
– Simon Sarris, Commented Apr 23, 2013 at 20:47

Samuel RIGAUD · Accepted Answer · 2023-12-14 11:02:17Z

340

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

edited Dec 14, 2023 at 11:02

Samuel RIGAUD

1,6981 gold badge19 silver badges28 bronze badges

answered Apr 23, 2013 at 19:02

Joe

15.6k8 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user1231561 Over a year ago

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!

HdN8 Over a year ago

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.

Ronen Rabinovici Over a year ago

setClearColor( 0xffffff, 1) did not work for me (made it white) but setClearColor( 0xffffff, 0) did work (made it transparent)

mrdoob Over a year ago

Since r78 you can simply do scene.background = new THREE.Color( 0xff0000 );

Avatar Over a year ago

Year 2020: scene.background = new THREE.Color( 0xff0000 ); worked.

|

Samuel RIGAUD · Accepted Answer · 2023-12-08 03:44:49Z

31

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.

edited Dec 8, 2023 at 3:44

Samuel RIGAUD

1,6981 gold badge19 silver badges28 bronze badges

answered Jul 26, 2015 at 11:01

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:02:39Z

23

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

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Feb 4, 2014 at 21:45

Peter Ehrlich

7,1654 gold badges53 silver badges67 bronze badges

Comments

Samuel RIGAUD · Accepted Answer · 2023-12-08 03:15:26Z

12

In 2020, using r115, it works very well with this:

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

edited Dec 8, 2023 at 3:15

Samuel RIGAUD

1,6981 gold badge19 silver badges28 bronze badges

answered Apr 2, 2020 at 19:20

Darkwing

1601 silver badge5 bronze badges

Comments

iethatis · Accepted Answer · 2017-10-19 18:54:58Z

3

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

answered Oct 19, 2017 at 18:54

iethatis

917 bronze badges

Comments

It's Joker · Accepted Answer · 2021-12-07 13:42:52Z

1

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

answered Dec 7, 2021 at 13:42

community wiki

It's Joker

Comments

Stephen Rauch · Accepted Answer · 2018-09-14 03:27:01Z

-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, 2018 at 3:27

Stephen Rauch♦

50.1k32 gold badges118 silver badges143 bronze badges

answered Sep 14, 2018 at 3:09

Ty Irvine

1

Collectives™ on Stack Overflow

Changing three.js background to transparent or other color

7 Answers 7

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related