복잡한 모델의 Three.js 음영이 이상하게 보임

부울 차이 연산자를 사용하여 "평면"베이스에서 돌출 된 SVG를 빼서 Blender에서 만든 모델이 있습니다. 또는 다른 말로하면, 우리는 그 안에 그림을 새겼습니다. 이 모델은 블렌더에서 잘 렌더링되지만 단순한 three.js 기반 웹 뷰어 (Blender 용 json 수출업자를 사용)에로드하면 표면에 반짝이는 버텍스가 있고 표면에 정말 이상한 그림자가 생깁니다.복잡한 모델의 Three.js 음영이 이상하게 보임

camera = window.camera = new THREE.PerspectiveCamera(45, $('main').width()/$('main').height(), 10, 10000); 

    loader = new THREE.JSONLoader(true); 

    var light = new THREE.DirectionalLight(0xffffff, 1.0); 
    light.position.set(-30, 30, 100); 
    light.target.position.set(0, 0, 0); 
    light.shadowCameraNear = 200;

사람이 우리가 잘못을했다 여부를 발견 할 수 :

은 여기 내 조명과 카메라인가? 3 가지 특정 문제, 즉 WebGL, Blender 또는 우리 모델입니까? Fiddle

출처

2013-07-27 lalomartins

기술적 인면에서 솔루션인지는 모르겠지만 JSON 블렌더 내보내기를 삭제하고 P3D 대신 .stl을 직접로드하여 문제를 해결했습니다.

출처

2013-08-03 04:17:19 lalomartins

당신의 바이올린을 보면

Output (screenshot)

, 당신의 vertexNormals 완전히 매끄럽게 것으로 보인다 따라서 음영이 올바르지 않습니다. 여기를 참조하십시오 : https://github.com/mrdoob/three.js/issues/1258 이 정보가 도움이 되나요?

출처

2013-07-27 15:33:02 GuyGood

FlatShading을 사용하면 바이올린에서 음영을 보정하지만 실제 생산 모델에서는 그렇지 않습니다. -/ vertexNormals가이 문제를 일으키는 것을 방지 할 수 있습니까? 내 블렌더 모델과 관련이 있습니까? 아니면 json 내보내기에 관한 것입니까? – lalomartins

복잡한 모델의 Three.js 음영이 이상하게 보임

답변

관련 문제