I’m trying to understand the principle of how a 2D(fabric.js ) turns into a beautiful 3D(three.js) t-shirt in your project. What kind of magic is this? For this, you need to have a ready-made 3D model (a t-shirt, for example) or is the pattern automatically converted into a ready-made object? I see two possible options:
- There is a ready-made 3D model of clothing, based on which threee.js creates uv mapping in svg format. These SVG are then loaded into fabric.js for customization like color or texture
- There is no 3D model prepared in advance. There is only fabric.js and your imagination. After you have created an SVG pattern in fabric.js, it is magically transformed into a 3D object.
Which of the options I described is closer to the truth?
The magic is to create 3D model in your favorite editor (I use marvelous designer) and make it’s UV map exactly the same as your SVG file. Neither three.js nor fabric.js is involved creating UV or SVG.
I receive .SVG and .DXF file from shirt producer which have all pieces to produce a shirt, in vector format.
I import .DXF to clo3D (or marvelous designer) to create 3D model.
I convert .SVG to .PNG, Then, while creating the 3D model on marvelous designer, I put the PNG as background and place the pieces exactly the same position, and then edit the UV map exactly the same with that SVG.
Then you load SVG to fabric.js, change color of it, use the canvas as texture for three.js, and apply this texture onto your 3D mesh. And the magic is done.
Thank you very much for the detailed answer.
hello boss your creation looks amazing, is similar like this one