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。它没有渲染问题，通常要快得多。

Three.js丑陋的渲染效果

1 个答案: