2

我正在尝试用 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 );

​</p>

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

4

2 回答 2

2

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

从three.js 文档：

WebGLRenderer（参数）

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

...

maxLights - 整数，默认为 4

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

但是，没有理由仅仅为了给立方体的面着色而创建 6 种不同的定向光。您可以设置面颜色并{vertexColors: THREE.FaceColors}在创建材质时使用以创建多色立方体。例如，请参阅仅使用一种灯（和随机颜色）的小提琴版本。

于 2012-12-17T21:23:18.173 回答
0

实际上，您的代码原样很好。

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

正如Migration wiki 中所见，

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

三.js r.53

.
于 2012-12-17T23:35:40.627 回答