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。它没有渲染问题，通常速度更快。