Question

I am trying to color a cube in three.js with 3 different colors but it seems like I am hitting some cap on the amount of THREE.DirectionalLight objects I can add to a scene. In the documentation I do not see any mention of a limit like this, so I am wondering if this is really the case or if I am missing something else?

http://jsfiddle.net/ZMwfc/

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( 800, 600 );
        document.body.appendChild( renderer.domElement );

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(
                                        35,             // Field of view
                                        800 / 600,      // Aspect ratio
                                        0.1,            // Near plane
                                        10000           // Far plane
                                    );
        camera.position.set( -15, 10, 10 );
        camera.lookAt( scene.position );

        scene.add( camera );

        var cube = new THREE.Mesh(
                                new THREE.CubeGeometry( 5, 5, 5 ),
                                new THREE.MeshLambertMaterial( { color: 0xFFFFFF } )
                            );
        scene.add( cube );
        // top
        light = new THREE.DirectionalLight( 0x0DEDDF );
        light.position.set( 0, 1, 0 );
        scene.add( light );

        // bottom
        light = new THREE.DirectionalLight( 0x0DEDDF );
        light.position.set( 0, -1, 0 );
        scene.add( light );

        // back
        light = new THREE.DirectionalLight( 0xB685F3 );
        light.position.set( 1, 0, 0 );
        scene.add( light );

        // front
        light = new THREE.DirectionalLight( 0xB685F3 );
        light.position.set( -1, 0, 0 );
        scene.add( light );

        // right
        light = new THREE.DirectionalLight( 0x89A7F5 );
        light.position.set( 0, 0, 1 );
        scene.add( light );

        // left
        light = new THREE.DirectionalLight( 0x89A7F5 );
        light.position.set( 0, 0, -1 );
        scene.add( light );

        renderer.render( scene, camera );

​

In here you will see the sides being colored: top, bottom, front, back, left and right. The first four will draw and the last two will not. Reorder them and see. Any thoughts?

Answer 1

The renderer has a limit on the number of lights it will render, by default it’s four.

From the three.js docs:

WebGLRenderer( parameters )

parameters is an optional object with properties defining the renderer’s behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.

…

maxLights — Integer, default is 4

Passing {maxLights: 6} to the renderer’s constructor will make all 6 lights work.

However, there’s no reason to create 6 different directional lights just to color the faces of a cube. You can set the face colors and use {vertexColors: THREE.FaceColors} when creating your material to create a multi-colored cube. See for example a version of your fiddle using one light only (and random colors).