SVG矢量图像到Three.js Shapes？答案

【问题标题】：SVG vector image to Three.js Shapes?SVG矢量图像到Three.js Shapes？
【发布时间】：2018-01-06 10:32:35
【问题描述】：

我想在 three.js webgl 画布上显示一个 2D 矢量图（带有线框材质）。地图原本是dwg格式，会转成svg。

但还没有找到任何用于three.js 的SVG 导入器。

有 svg 加载器/导入器吗？还是其他显示矢量图的方法？

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

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

谢谢！

【问题讨论】：

标签： svg 2d three.js

【解决方案1】：

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

【讨论】：

嗨，你能解释一下这是如何实现的吗？文档说 svg 将作为 SVGDocument 加载。然后如何将其转换为threejs形状？

【解决方案2】：

如果您将 SVG 带入您的网页（可能在隐藏的 DIV 中？），您应该能够在 DOM 中查询其所有组件。然后画出你觉得合适匹配的three.js项。

【讨论】：

没有找到其他合适的解决方案，所以做了一个小的 svg loader/parses (load from file) with javascript 然后从那里构建行/元素。
是的，完全正确 - 它可以让您生成适合您的特定用例的 WebGL prims。

【解决方案3】：

有两种方式：

使用https://github.com/mattdesl/svg-mesh-3d/
使用搅拌机

svg-mesh-3d 的问题在于它不会为您进行拉伸，并且所有内容都必须进行编程。这就是为什么 Blender 是更好的方法。如果你知道 Blender，你可以在几分钟内将 SVG 导入其中，挤压并导出为 JSON 格式。稍后您使用 loader 将 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

【讨论】：