Three.js 못 생기는 렌더링 효과

Question

2D svg 파일을 기반으로 Three.js로 건물의 3D지도를 렌더링하려고합니다.

var material = new THREE.MeshLambertMaterial({ 
    color: 0xffffff, 
    shading: THREE.FlatShading, 
    overdraw: 0.5 
}); 
var obj = { 
    name: id, 
    shape: transformSVGPathExposed(el.path) 
}; 
obj.shape3d = obj.shape.extrude({ 
    amount: 5, 
    bevelEnabled: false 
}); 
obj.mesh = new THREE.Mesh(obj.shape3d, material); 
obj.mesh.rotation.x = Math.PI/2; 
obj.mesh.scale.set(1,1,1); 
obj.mesh.position.x = -750; 
obj.mesh.position.z = -500; 
obj.mesh.position.y = 20; 
MapEngine.shops.push(obj); 

transformSVGPathExposed이 호출로 노출 d3.js에서 transformSVGPath 기능입니다 : 기본적으로, 내가 무엇을하고 있는가하는 것은 내가 그렇게 그것을 모양을 만든 다음 돌출 d3.js에서 transformSVGPath를 사용, SVG에서 각 경로를 취할 것입니다 밖에서. 내 svg 파일은 다음과 같습니다 : map svg. 그리고 렌더링 효과는 다음과 같습니다 : Three.js render

그 이유는 내가 그 못생긴 nonsmooth meshes를보고있는 이유는 무엇입니까?

Answer 1

이것은 CanvasRenderer에서 잘 알려진 문제이며 디자인 상 명백하게 나타납니다. 해결 방법은 0.35와 같이 material.overdraw를 0이 아닌 값으로 설정하는 것입니다 (이 매개 변수는 최근 boolean에서 float로 변경됨). https://github.com/mrdoob/three.js/pull/3407

다른 옵션은 WebGLRenderer로 전환하는 것입니다. 렌더링 문제가 없으며 일반적으로 훨씬 빠릅니다.