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    lt canvas id  canvasColor  gt    My CSS    lt style type  text css  gt   canvasColor    z-index  998  opacity 1  background  red     lt  style gt    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

User · Answer

For transparency  this is also mandatory  renderer   new THREE WebGLRenderer    alpha  true     via Transparent background with three js

User · Answer

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

User · 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

User · Answer

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   gt  transparent   View the docs for more info

User · Answer

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

User · Answer

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

[css] Changing three.js background to transparent or other color

Examples related to css

Examples related to html

Examples related to canvas

Examples related to html5-canvas

Examples related to three.js