Attempting to apply three different colors to a cube in three.js, it appears that there may be a limit on the number of THREE.DirectionalLight objects that can be added to a scene. The lack of mention of such a limit in the documentation has raised questions about whether this restriction truly exists or if there is another factor at play.
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 observing the coloring of the cube's sides - top, bottom, front, back, left, and right - it becomes apparent that only the first four are rendered while the last two are not. Rearranging their order could yield interesting results. Any thoughts?