CODEWITHSUNDEEP
csshtmlcanvashtml5-canvasthree.js
user1231561
user1231561

Reputation: 3359

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?

Upvotes: 172

Views: 216837

Answers (7)

Joe
Joe

Reputation: 15528

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

Upvotes: 337

Yotam Omer
Yotam Omer

Reputation: 15356

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.

Upvotes: 31

Darkwing
Darkwing

Reputation: 160

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;

Upvotes: 12

It&#39;s Joker
It&#39;s Joker

Reputation: 65

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

Upvotes: 1

Ty Irvine
Ty Irvine

Reputation: 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

Upvotes: -1

iethatis
iethatis

Reputation: 91

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

Upvotes: 3

Peter Ehrlich
Peter Ehrlich

Reputation: 7135

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

Upvotes: 23

Related Questions