Three.js에서 큐브를 채색하려고 시도합니다.

Question

three.js에서 3 가지 색상의 큐브를 채색하려고하는데 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); 

http://jsfiddle.net/ZMwfc/

당신은 측면 착색되는 것을 볼 수 있습니다. 첫 번째 4 개가 그려지며 마지막 두 개는 그려지지 않습니다. 순서를 바꾸어보십시오. 이견있는 사람?

Answer 1

렌더러는 렌더링 할 라이트 수에 제한이 있으며, 기본적으로 4입니다. the three.js docs에서

:

WebGLRenderer (매개 변수)

매개 변수는 렌더러의 동작을 정의하는 속성이 옵션 개체입니다. 생성자는 매개 변수도 전혀 사용하지 않습니다. 모든 경우에 매개 변수가없는 경우 기본 기본값으로 간주됩니다.

...

maxLights - 정수, 기본값은 모든 6 개 조명 작업을 할 것입니다 렌더러의 생성자에 {maxLights: 6} 전달 4

입니다.

그러나 입방체의 얼굴을 색칠하기 위해 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 위키에서 보는 바와 같이

,

WebGLRenderer 생성자는 사용하지 않습니다 더 이상 maxLights 매개 변수 : 쉐이더는 장면에서 빛의 정확한 수 (그 수 있도록 응용 프로그램 계층까지 이제 생성됩니다 특정 시스템에서 셰이더가 컴파일 됨).

three.js를 r.53

.