Question

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

        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

渲染器对渲染的灯光数量有限制，默认情况下为4。

来自the three.js docs：

WebGLRenderer（参数）

参数是一个可选对象，其属性定义了渲染器的行为。构造函数根本不接受任何参数。在所有情况下，当参数丢失时，它将采用合理的默认值。

...

maxLights - 整数，默认为4

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

但是，没有理由创建6个不同的方向灯来为立方体的面部着色。您可以在创建材质时设置面颜色并使用{vertexColors: THREE.FaceColors}来创建多色立方体。请参阅示例a version of your fiddle using one light only (and random colors)。

Answer 2

实际上，你的代码很好。

这是一个小提琴，显示它在修订版r.53下工作：http://jsfiddle.net/ZMwfc/4/。

如Migration wiki所示，

WebGLRenderer构造函数不再使用maxLights参数：将生成具有场景中灯光确切数量的着色器（现在应用于应用层以确保着色器在特定系统上编译）。

three.js r.53

试图在Three.js中为立方体着色

2 个答案: