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?
Best Answer
I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:
in your
threejs
init function. Change it to:Update: Thanks to HdN8 for the updated solution:
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:Update #3: Mr.doob points out that since
r78
you can alternatively use the code below to set your scene's background colour: