3D clothes Configurator

[Parisa_Shahbazi]

Hi. I am three.js developer.
I want to create a project as a 3d clothes configurator like below.
I need to know what is 2d part. Is it by fabric js? Does it contain a .dxf file? what are these template pictures of t-shirt?
next ,I want to know how can I add different textures to one layer and change the position? The most important part is syncing 2d canvas and 3d canvas with different files .
What is your experience about it?
I need roadmap.
Thanks

https://dsign4you.com/3d/?design=33335&q=hq&showcompanylogo=false

[Fennec]

This should get you started:

Three.js + Fabric.js

This is just an extension of the other example. Time to time, people ask about such interactive things. For example, an editor of prints on t-shirts I haven’t worked with Fabric.js before, I just knew that it exists. Today I’ve tried to combine two libraries to create a dynamic and (kind of) editable texture. I hope, this topic will be a good start point for someone https://jsfiddle.net/prisoner849/rr1bsfsj/show/ [Three_and_Fabric]

If you need mouse interactions on the 3D model, continue here:

Three.js + Fabric.js but with mouse and touch raycast

The codebase for this is from this post by prisoner849 i added a feature where u can drag, scale, and rotate the fabricjs object directly from threejs 3d model, so you don’t need do that from the fabricjs canvas, just hide it . I’ve been developing this for a while now, since i put a lot of time and money into this hope someone will find this helpful. Final product of this you can access it here it was done by combining this example with this repo. You can get the code here or try p…

[naonao_naonvl]

@Parisa_Shahbazi

I need roadmap.

• Create a 3d model of your product/or buy. export to obj
• Make sure the UV Map is correctly managed
• Export the UV Layout
• Import the UV Layout to vector editor software (illustrator, corel draw)
• Trace the UV layout and add some design, save to svg
• start with this https://codepen.io/Zhu-Zhang/pen/vYPOdQw
• Work your way to change the 3d model
• Implement fabric.loadSvgFromUrl to load the svg from previous step

Basically those are the steps to create what u wanted

[Doroftei_Doroftei]

do you have the github code for the software in the picture?
or if you have something similar

[uwindu_iroshan]

watch demo video.

[Parisa_Shahbazi]

It is not open source

[Mike_angelo]

Hello,

Check this, its a good example of what you are trying to achieve, its good example from UI perspective also. Contrado website is mix of 2d and 3d product design pages. There are some 3d hard products also.

Mobile App Preview