three.js 장면에서 조명 개선

Question

GitHub does for STL files과 비슷한 three.js를 사용하여 솔리드 모델을 렌더링하고 있습니다. 그러나 조명이 잘 보이도록 설정하는 데 문제가 있습니다. 내가 지금있는 것은 다음과 같습니다

문제는 그것만이 정말 어떤 각도에서 좋아 보인다는 것이다. 다른 각도에서 대비가 좋지 않습니다 (수직 인면은 정확히 같은 회색 음영이 될 수 있습니다).

I는 다음과 같이이 달성 사용하고있는 코드 :

light = new THREE.DirectionalLight(0xffffff, 1); 
light.position.copy(camera.position); 
scene.add(light); 

과 함께 카메라 이동, 광 이동한다.

아이디어를 향상시키는 방법은 무엇입니까?

Answer 1

다음은 렌더링 된 객체에 /의 조명을 개선하기 위해 시도 할 수있는 작업은 다음과 같습니다

다른 재료를 사용해보십시오 :

다른 재료가 다르게 빛을 반사합니다. 기본 자료를 사용하고있는 것으로 보입니다. Lambert 자료를 사용해보십시오. 메쉬는 메쉬를 작성할 때 정의됩니다. 여기에서 찾을 수 있습니다 램버트 재질

이

var objectMesh = new THREE.Mesh(objectGeom, material4); 

문서 : 예를 들어, 먼저 재료 정의 :

var material4 = new THREE.MeshLambertMaterial({color: 0xffffff, vertexColors: THREE.FaceColors}); 

을 다음 객체를 메쉬 http://threejs.org/docs/index.html#Reference/Materials/MeshLambertMaterial

하는 추가 조명을 추가

를

대부분의 물체가 다른 각도에서 다른 광원을 사용하여 더 잘 보입니다. NT 측. 다음과 함께 새 조명을 추가하십시오 :

lights[ 0 ] = new THREE.PointLight(0xffffff, 1, 0); 
lights[ 0 ].position.set(0, 200, 0); 
scene.add(lights[ 0 ]); 

표시 등 []은 여러 개의 표시등을 포함 할 수있는 배열입니다.

추가 집광 도우미 : 개발 중에

, 그것은 빛이 어디에서 오는지보기 위해 직접 조명 도우미를 추가하는 데 도움이됩니다. 예를 들어 :

directionalLightHelper[0] = new THREE.PointLightHelper(lights[0], 1); 
scene.add(directionalLightHelper[0]); 

Answer 2

내가 자신을 표준 물질을

standardMaterial = new THREE.MeshStandardMaterial({ 
        color: 0xffffff, 
        metalness: 0.5, 
        roughness: 0.5, 
       }); 

를 사용하게 렌더러에 대한 gammaOutput를 사용하는 것을 선호 overbright 지역은 훨씬 더 잘 :

 renderer.gammaInput = true; 
     renderer.gammaOutput = true; 

예술에서 관점, 그것은 빛이 화면의 왼쪽 상단에서 오는 것이 가장 좋습니다, 그래서 조금 오프셋을 제공합니다. 그림자를 활성화하면 오브젝트가 항상 그림자를 오른쪽 아래로 드리 우게됩니다.