SVG矢量图像到Three.js形状？

Question

我想在three.js webgl画布上显示2D矢量地图（使用线框素材）。 Map最初来自dwg格式，将转换为svg。

但是没有为three.js找到任何SVG导入器。

是否有svg装载机/进口商？ 或者其他一些显示矢量地图的方法？

（我尝试将其转换为3ds max中的网格并导出到.obj， 但它失去了一些非封闭的路径，一些物体得到了三角形的表面， 在线框材料中看起来不太好）

理想情况下，地图将被导入/转换为形状并可在此处查看（中间层具有“纯形状”，没有额外的顶点等） http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html

谢谢！

Answer 1

尝试使用＆＃34; SVGLoader＆＃34; （http://threejs.org/docs/#Reference/Loaders/SVGLoader），你需要添加该功能，因为它不在THREE.js r71中，所以，这里是＆＃34; https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js＆＃34;

Answer 2

有两种方法：

1. 使用https://github.com/mattdesl/svg-mesh-3d/
2. 使用Blender

svg-mesh-3d的问题在于它不会为您执行拉伸，并且必须对所有内容进行编程。这就是Blender更好的方式。如果您了解Blender，您可以将SVG导入其中，然后在几分钟内拉伸并导出为JSON格式。稍后您使用加载程序将JSON加载到动画中。如果您不了解Blender，请按以下步骤操作：

https://www.youtube.com/watch?v=rDjhO7r3agc&t=225s

https://www.jonathan-petitcolas.com/2015/07/27/importing-blender-modelized-mesh-in-threejs.html

Answer 3

如果您将SVG带入您的网页（可能是隐藏的DIV？），您应该能够查询DOM中的所有组件。然后绘制你觉得合适的三个物品。