尝试在 Three.js 中为立方体着色 [英] Trying to color a cube in Three.js

问题描述

我正在尝试用 3 种不同颜色在 Three.js 中为立方体着色，但似乎我对可以添加到场景中的 THREE.DirectionalLight 对象的数量达到了上限.在文档中，我没有看到任何提及这样的限制，所以我想知道这是真的还是我遗漏了其他东西?

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?

推荐答案

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

The renderer has a limit on the number of lights it will render, by default it's four.

来自 thethree.js 文档:

WebGLRenderer(参数)

WebGLRenderer( parameters )

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 — 整数，默认为 4

maxLights — Integer, default is 4

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

Passing {maxLights: 6} to the renderer's constructor will make all 6 lights work.

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

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

这篇关于尝试在 Three.js 中为立方体着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！