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 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?

回答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).

回答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

来源：https://stackoverflow.com/questions/13922130/trying-to-color-a-cube-in-three-js

标签

javascript

three.js