Trying To Color A Cube In Three.js

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

Solution 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).

Solution 2:

Actually, your code is fine as is.

Here is a fiddle showing it working under revision r.53: http://jsfiddle.net/ZMwfc/4/.

As seen in the Migration wiki,

WebGLRenderer constructor doesn't use anymore maxLights parameter: shaders will be generated with the exact number of lights in the scene (it's now up to the application layer to make sure shaders compile on a particular system).

three.js r.53

.