SVG vector image for Three.js shapes?
I want to display a 2D vector map on a web.js webgl canvas (with wireframe material). Map originally from dwg format, will be converted to svg.
But havent find any SVG importers for three.js.
Is there an svg loader / importer? Or some other way to display vector maps?
(I tried converting it to mesh in 3ds max and exporting to .obj, but it loses some open paths and some objects get a triangulated surface which doesn't look good in wireframe material)
Ideally the map will be imported / converted to shapes and viewable like here (middle layer with "clean shapes", no extra vertices, etc.). http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html
thank!
Try using "SVGLoader" ( http://threejs.org/docs/#Reference/Loaders/SVGLoader ), you need to add this function because it is not in THREE.js r71, so here " https: // github. com / mrdoob / three.js / blob / master / examples / js / loaders / SVGLoader.js "
There are two ways:
- Use https://github.com/mattdesl/svg-mesh-3d/
- Use Blender
The problem with svg-mesh-3d is that it doesn't extrude for you, and everything should be programmed. This is why Blender is the best way to go. If you know Blender, you can import SVG into it, extrude and export to JSON format in a few minutes. Later, you use a loader to load the JSON into your animation. And if you don't know Blender, here's how to do it:
https://www.youtube.com/watch?v=rDjhO7r3agc&t=225s
https://www.jonathan-petitcolas.com/2015/07/27/importing-blender-modelized-mesh-in-threejs.html
If you bring the SVG into your webpage (perhaps in a hidden DIV?), You can query all of its components in the DOM. Then draw the three.js elements that you think fit.