我想在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
谢谢!
答案 0 :(得分: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"
答案 1 :(得分:0)
有两种方法:
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
答案 2 :(得分:-1)
如果您将SVG带入您的网页(可能是隐藏的DIV?),您应该能够查询DOM中的所有组件。然后绘制你觉得合适的三个物品。