html - Three.js丑陋的渲染效果

Question

我正在尝试根据 2D svg 文件使用 Three.js 渲染建筑物的 3D map 。基本上，我所做的是从 svg 中获取每条路径，使用 d3.js 中的 transformSVGPath 来创建形状，然后将其拉伸(stretch)，就像这样:

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(此参数最近从 bool 值更改为浮点值)。参见 https://github.com/mrdoob/three.js/pull/3407

其他选项是切换到 WebGLRenderer。它没有渲染问题，而且通常速度更快。