三.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。它没有渲染问题，而且通常更快。