CODEWITHSUNDEEP
svg2dthree.js
AdvancedTech
AdvancedTech

Reputation: 63

SVG vector image to Three.js Shapes?

I want to display a 2D vector map on three.js webgl canvas (with wireframe material). Map is originally from dwg format, would be converted to svg.

But havent find any SVG importers for three.js.

Is there an svg loader/importer? Or some other method of displaying vector maps?

(I tried converting it to a mesh in 3ds max and export to .obj, but it looses some non-closed paths and some objects get triangulated surface, which doesnt look good in wireframe material)

Ideally the map would be imported/converted to shapes and viewable as in here (the middle layer with "pure shapes", no extra vertices etc) http://mrdoob.github.com/three.js/examples/webgl_geometry_shapes.html

thanks!

Upvotes: 6

Views: 8859

Answers (3)

Nulik
Nulik

Reputation: 7350

There are two ways:

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

The problem with svg-mesh-3d is that it does not do the extrude for you, and everything has to be programmed. This is why Blender is a better way. If you know Blender, you can import the SVG into it , extrude and export to JSON format in a few minutes. Later you use loader to load the JSON into your animation. And if you don't know Blender, here is 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

Upvotes: 0

Darius Miliauskas
Darius Miliauskas

Reputation: 3504

Try to use "SVGLoader" (http://threejs.org/docs/#Reference/Loaders/SVGLoader), you need to add that feature because it is not in THREE.js r71, so, here it is "https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/SVGLoader.js"

Upvotes: 2

bjorke
bjorke

Reputation: 3305

If you bring the SVG into your web page (perhaps in a hidden DIV?), you should be able to query all of its components in the DOM. Then draw the three.js items that you feel are appropriate matches.

Upvotes: 0

Related Questions