2

three.js で立方体を 3 つの異なる色で色付けしようとしていますが、シーンに追加できる 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 人は引き分けません。それらを並べ替えて見てください。何かご意見は？

4

2 に答える 2

2

レンダラーには、レンダリングするライトの数に制限があり、デフォルトでは 4 つです。

three.js docsから：

WebGLRenderer( パラメータ )

parameters は、レンダラーの動作を定義するプロパティを持つオプションのオブジェクトです。また、コンストラクターはパラメーターをまったく受け入れません。いずれの場合も、パラメーターが欠落している場合は、適切なデフォルトが想定されます。

...

maxLights — 整数、デフォルトは 4

{maxLights: 6}レンダラーのコンストラクターに渡すと、6 つのライトすべてが機能します。

ただし、立方体の面に色を付けるためだけに 6 つの異なる指向性ライトを作成する理由はありません。面の色を設定し{vertexColors: THREE.FaceColors}、マテリアルを作成するときに使用して、マルチカラーの立方体を作成できます。たとえば、1 つのライトのみ (およびランダムな色) を使用するフィドルのバージョンを参照してください。

于 2012-12-17T21:23:18.173 に答える
0

実際、あなたのコードはそのままで問題ありません。

リビジョン r.53 で動作することを示すフィドルは次のとおりです: http://jsfiddle.net/ZMwfc/4/。

Migration wiki に見られるように、

WebGLRenderer コンストラクターは maxLights パラメーターを使用しなくなりました。シェーダーは、シーン内の正確な数のライトで生成されます (シェーダーが特定のシステムで確実にコンパイルされるようにするのは、アプリケーション レイヤー次第です)。

three.js r.53

.
于 2012-12-17T23:35:40.627 に答える