Convert 3d model in threejs scene to svg

Questions
,
1

Hello,

Is there a way that If I can convert a painted 3d model into svg format in this example?
https://tomtung.github.io/chameleon.js/

Thanks & Regards,
Ashima Jindal

2

Maybe other people will chip in with alternatives but it seems unlikely for this specific case.

Three.js has a renderer that is capable of generating SVGs from 3d models, the SVGRenderer, BUT one of its limitations is that it doesn’t support textures. And painting in the example you provide is achieved by painting on a texture. You could get a SVG of the 3d model but without the paint.

You can see an example of SVGRenderer in action here:
https://threejs.org/examples/svg_sandbox.html

2 Likes
3

Thank you for this information. So actually I am trying to select a region over a 3d model using painting and then save that painted region on 3d model in svg format. is there any other technique that I can follow for this other than the mentioned example of chameleon ?

4

Can you explain more in detail what you want to achieve? What do you mean by “save that painted region on 3d model in svg format”? Do you want to save the bitmaps (pixels) of the texture matching the selected areas? Do you want to save the individual faces of your model from the current camera point of view?

A somewhat simple way to select faces of a model is to raycast. If your object doesn’t have thousands of faces you can do it on mouseMove and the raycaster will return a object for every mouse movement. Inside the object there are coordinates of the meeting point between the ray and the mesh and the face of the mesh that was hit. From there, you know what your mouse “painted” over.

For something even fancier but slightly more complicated you can look at three-mesh-bvh, it’s a superpowered implementation of the raycaster and has some neat examples that might help you achieve what you want:

5

For example in the attached image, if you see I am just selecting a part of any 3d model( here chameleon) by painting over that. I wanted to export that painted area as svg. but i get stuck here. I dont want the individual faces from the current camera view. I just want what i try to draw a region over 3d model can be exported as svg.

Screenshot from 2021-10-23 12-19-35
Screenshot from 2021-10-23 12-19-351200Ă—788 31.6 KB

6

Understood. I don’t think it’s an easy task, sadly.
One approach that could work:

  1. use the three-mesh-bvh: triangle painting approach to select faces of your model in a paint-like way
  2. clone the faces into a new mesh into a new scene
  3. render the new scene with the SVGRenderer
  4. copy the SVG produced by the SVGRenderer

It might work but I’m honestly not too sure about it.

(if you want more suggestions, remove the “solved” checkmark so more people can chip in with ideas)

1 Like
7

I just have one basic doubt: the link that you gave for the triangle paining example. is there any other way that I can see the code for that example other than by just using inspect. because by that the code is not that much readable.

8

It seems to be here: three-mesh-bvh/collectTriangles.js at 700fe8166a20c9120b3bb8524d1682f603162827 · gkjohnson/three-mesh-bvh · GitHub

Look into the default raycaster as well. It might be a bit simpler to work with to begin with. See: three.js examples and three.js examples (the second one uses points and not meshes but you can copy the technique. The thing you want to look for from your ray intersection is faceIndex)

1 Like