Erstellen von drei js extrudeGeometry von Svg Pfad

Question

Ich versuche, eine 3D-Karte der Bezirke von London mit drei js zu generieren. Ich habe dieses Beispiel Reverse-engineered: http://threejs.org/examples/webgl_geometry_extrude_shapes2.html mit dieser SVG-Datei: https://upload.wikimedia.org/wikipedia/commons/2/29/London-boroughs.svg

Also, ich bin svg Weg Saiten vorbei wie:

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" 

in die transformSVGPath Funktion, und es ist eine Art funktioniert, außer die Scheitelpunkte scheinen stark interpoliert zu sein.

ich die Konsole Fehler "three.js: 34023 THREE.ShapeUtils: Unable Polygon Triangulation in Triangulate()" und es sieht wie folgt aus:

Answer 1

Bei der Untersuchung des SVG, es ist eine Sammlung von Linien über eine primäre geschlossene Form. Die primäre Form ist das erste Element in der SVG-Datei und umfasst ganz London. Der Rest der Pfade sind einfach lineTo und Bezier-Kurven, die die Grenzen definieren. Dies geschieht, damit die Größe der SVG-Datei effizient ist und die gemeinsamen Kanten der Bezirke nicht verdoppelt werden - ein klassisches 2D-Mapping-Problem. 3d ist ein anderer Problemraum - der Extrusionspfad in Three.js erfordert diskrete Umrissformen, um eine vollständige geschlossene Form zu bilden. Diese SVG-Datei kann nicht für 3D oder Polygone verwendet werden. Sie sind besser dran, jeden Bezirk als ein einzelnes SVG/Polygon zu finden und sie einzeln einzeln zu importieren, wenn Sie sie finden können.

Ich glaube, Sie diese Datei mehr verwendbar finden, da jeder Bezirk ist eine diskrete Form, aber es wird immer noch brauchen tayloring die Schläge zu entfernen: https://commons.wikimedia.org/wiki/File:London_boroughs.svg