Three.js醜陋的渲染效果

Question

我想基於2D svg文件渲染帶有Three.js的建築物3D地圖。基本上，我做的是我從SVG每條路徑，使用來自d3.js transformSVGPath創建形狀，然後將其擠出，這樣的：

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功能露出並調用從外面。我的svg文件如下所示：map svg。渲染效果如下所示：Three.js render

我看到那些醜陋的非平滑網格的原因是什麼？

Answer 1

這是CanvasRenderer衆所周知的問題，顯然是由設計。解決方法是將material.overdraw設置爲某個非零值，如0.35（該參數最近從布爾型更改爲浮點型）。請參閱https://github.com/mrdoob/three.js/pull/3407

其他選項是切換到WebGLRenderer。它沒有渲染問題，通常速度更快。