从svg路径创建三个js extrudeGeometry

Question

我正在尝试使用三个js生成一张伦敦自治市的3d地图。我使用这个svg文件对这个示例进行了逆向工程：https://upload.wikimedia.org/wikipedia/commons/2/29/London-boroughs.svg：http://threejs.org/examples/webgl_geometry_extrude_shapes2.html

因此，我传递的svg路径字符串如下：

M130.833,250.833L135.5,262.5l14,42.667l-6.333,4l-4.667,3.667l1,3.666l-14.333,3  c0,0,0.333,3.334,4.667,5.667s16,2.667,17,3.667s0.667,6.333,0.667,6.333l-5.667,6.333l-0.667,6.667l-1.667,2l-3.333,1.333l-4.667,6  l-1.333,10l-2.667,8l-4-0.333c0,0,0.667,6.001-0.333,9.667s-2,9.666-5,11.333S112.5,396,112.5,396"

到transformSVGPath函数中，除了顶点似乎被插值得很糟糕之外，它的工作原理还不错。

我收到控制台错误"three.js:34023 THREE.ShapeUtils: Unable to triangulate polygon！in triangulate()“，它看起来像这样：

​

​

Answer 1

根据SVG的检查，它是主要闭合形状上的线条集合。主要形状是SVG文件中的第一个元素，它包含整个伦敦。其余的路径只是定义边界的lineTo和bezier曲线。这样做的目的是为了使svg文件的大小更有效，并且不会使行政区的共享边缘加倍--这是一个典型的2d映射问题。3d是一个不同的问题- Three.js中的挤出路径需要离散的轮廓形状才能形成完整的闭合形状。此SVG文件不适用于3d或多边形。您最好将每个区作为单个SVG/多边形来查找，如果可以找到，则分别导入它们。

我相信你会发现这个文件更有用，因为每个区都是一个离散的形状，但它仍然需要tayloring来删除笔划：https://commons.wikimedia.org/wiki/File:London_boroughs.svg