尝试在 Three.js 中为立方体着色答案

【问题标题】：Trying to color a cube in Three.js尝试在 Three.js 中为立方体着色
【发布时间】：2012-12-17 21:01:38
【问题描述】：

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

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

【问题讨论】：

标签： javascript three.js

【解决方案1】：

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

来自the three.js docs：

WebGLRenderer(参数)

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

...

maxLights — 整数，默认为 4

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

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

【讨论】：

谢谢，约翰！我假设这是由于性能原因.. 有没有更有效的方法来为立方体着色？
查看我对答案的编辑：您可以使用材质来创建不同颜色的面，而无需依赖灯光。
那会是一个更高效的解决方案吗？再次感谢您的宝贵时间。

【解决方案2】：

其实，你的代码是没问题的。

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

如在Migration wiki 中所见，

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

three.js r.53

【讨论】：