从svg路径创建三个js extrudeGeometry

Question

我试图使用Three js生成伦敦自治市的三维地图。我反向设计了这个例子：http://threejs.org/examples/webgl_geometry_extrude_shapes2.html 使用此svg文件：https://upload.wikimedia.org/wikipedia/commons/2/29/London-boroughs.svg

所以，我传递了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函数，除了顶点似乎插入错误之外它还有效。

我收到控制台错误＆＃34; three.js：34023 THREE.ShapeUtils：无法对多边形进行三角测量！在triangulate（）＆＃34;它看起来像这样：

Answer 1

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

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