Threejs canvas background black

The color of the background of the canvas is not determined by the CSS value but using renderer.setClearColor (0xff0000, 1);


From r78 versions onwards, you can use the code below to set your scene's background colour:

var scene = new THREE.Scene();

scene.background = new THREE.Color( 0x000000 );


You made a scene, created a camera and created a renderer, but you're missing two important things: adding something to render, and actually rendering it.

After your last line, add

var cube = new THREE.Mesh( 
    new THREE.CubeGeometry( 1,1,1 ), 
    new THREE.MeshNormalMaterial() 
);
scene.add( cube );

camera.position.set( 2,2,2 );
camera.lookAt( cube.position );

renderer.render( scene, camera );

That will create a cube on the origin ( 0,0,0 ), with size 1 unit; place the camera a bit away from it and pointed at the cube; and then call the renderer to render the cube.


You can control the background color using css, but you must first set the "alpha" of your WebGLRenderer to "true".

In you example, I added the alpha option and set to true in the renderer, and I also added the background-color property in the body style.

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; background-color: white; }
            canvas { width: 100%; height: 100%; background-color: white; }
        </style>
    </head>
    <body>
    <script src="Stereos/threejs/three.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

        var renderer = new THREE.WebGLRenderer( {alpha: true} );
        renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( renderer.domElement );
    </script>
    </body>
</html>

Tags:

Javascript

Three.Js

Recent Posts