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

Question

我正在尝试使用 Three.js 基于 2D svg 文件渲染建筑物的 3D map 。基本上，我正在做的是从 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);

transformSVGPathExpose 是来自 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。它不存在渲染问题，并且通常要快得多。