6

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

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

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

（我尝试在 3ds max 中将其转换为网格并导出为 .obj，但它会丢失一些非封闭路径，并且某些对象会变成三角曲面，这在线框材质中看起来不太好）

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

谢谢！

4

3 回答 3

2

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

于 2015-07-12T18:15:58.040 回答
0

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

于 2013-02-17T04:50:40.193 回答
0

有两种方法：

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

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

于 2018-01-06T02:32:35.190 回答