javascript - 尝试在 Three.js 中为立方体着色

Question

我正在尝试用 3 种不同的颜色为 three.js 中的立方体着色，但似乎我对可以添加到场景中的 THREE.DirectionalLight 对象的数量设置了一些上限。在文档中，我没有看到任何提及这样的限制，所以我想知道是否确实如此，或者我是否遗漏了其他内容？

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 );

在这里你会看到被着色的边:顶部、底部、前面、后面、左边和右边。前四个会平局，后两个不会。重新排序并查看。有什么想法吗？

Answer 1

渲染器对其渲染的灯光数量有限制，默认为四个。

来自 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

将 {maxLights: 6} 传递给渲染器的构造函数将使所有 6 个灯都工作。

但是，没有理由仅仅为了给立方体的表面着色而创建 6 种不同的方向光。您可以设置面颜色并在创建 Material 时使用 {vertexColors: THREE.FaceColors} 来创建多色立方体。参见示例 a version of your fiddle using one light only (and random colors) .