Создание THREE js extrudeGeometry из svg path

Question

Я пытаюсь создать 3d-карту городских районов Лондона, используя три 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, и вида работ, за исключением вершины кажутся интерполированными плохо.

Я получаю консоль ошибок "three.js: 34023 THREE.ShapeUtils: Невозможно триангуляции полигон в триангуляции()" и это выглядит следующим образом:

Answer 1

При осмотре SVG, это набор линий над первичной замкнутой формой. Основная форма является первым элементом в файле SVG и охватывает весь Лондон. Остальные пути - это просто кривые lineTo и безье, которые определяют границы. Это делается для того, чтобы размер файла svg был эффективным, а общие грани районов не удваивались - классическая проблема с отображением 2d. 3d - это другое проблемное пространство - путь выдавливания в Three.js требует дискретных контурных форм, чтобы сформировать полную закрытую форму. Этот SVG-файл непригоден для 3d или полигонов. Вам лучше найти каждый район как один SVG/многоугольник и импортировать их каждый отдельно, если вы сможете их найти.

Я считаю, что вы можете найти этот файл более годную к употреблению, поскольку каждый район представляет собой дискретную форму, но он все равно будет нужно tayloring удалить штрихи: https://commons.wikimedia.org/wiki/File:London_boroughs.svg