I’m trying to use Threejs to visualize an 3D object created from a 2D SVG.
Here is an example (Please wait full load almost 20s) :
As you can see in Codepen I use an SVG from which I extract the paths to “engraved” a box. The “engravement” have a different material from the surface.
1/ CodePen :
The result I have on the codepen is almost what I want to achieve but it’s so slow to calculate the CSG.subtract(box, inside ). Almost 20s on my computer…
=> I would appreciate to get some idea on how to do it faster ? I thought perhaps I need to make a Shader script or something ?
2/ My Dream :
In fact the way I make the engravement is not exactly what I wanted to achieve at first.
If possible I would like to make something that seems more complicated to me : The engravement depth should vary with the width of the path like on this drawing
Yes I could try to do that. Perhaps with PaperJs I can handle to create the negative quickly.
Edit : I DID IT AND WORKS A LOT FASTER INDEED. VERY GOOD IDEA @PavelBoytchev THANK YOU.
I thought about making something with shader but I’m not 3D expert so I don’t really know how to handle that and if I could really work cause I need to create the map with code also.
It seems to me I would need to to generate a picture like this one in the middle for the normal mapping and I didn’t have any idea how I could generate this from my SVG…seems difficult !
While traveling in the subway, I got an idea. The source is an image, the geometry is a THREE.RingGeometry and the positions of the vertices depend on the color of the image pixels. I hope you do not mind a portrait of Che Guevara. Here is an online demo with closeup snapshots from the front and from the back: