# 3D clothes Configurator

**URL:** <https://discourse.threejs.org/t/3d-clothes-configurator/60156>\
**Category:** Questions\
**Tags:** 3d-applications, canvas-2d, shader-material, object3d, textures, materials, 3d-configurator, geometry\
**Created:** [January 10, 2024, 11:16am UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156 "2024-01-10T11:16:08Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [January 10, 2024, 11:16am UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/1 "2024-01-10T11:16:08Z")

</div>

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](https://dsign4you.com/3d/?design=33335&q=hq&showcompanylogo=false)

 ![ss1](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/9/0957334c321ae9d187621dfc462cc8aab580edfb.jpeg)

---

<div class="post-metadata">

**Author:** ![Fennec](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fennec/32/59265_2.png) [@Fennec](https://discourse.threejs.org/u/Fennec)\
**Post date:** [January 10, 2024, 11:38pm UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/2 "2024-01-10T23:38:33Z")

</div>

This should get you started:

> [@Three.js + Fabric.js](https://discourse.threejs.org/t/three-js-fabric-js/2111):
>
> This is just an extension of the other [example](https://threejs.org/examples/webgl_materials_texture_canvas). Time to time, people ask about such interactive things. For example, an editor of prints on t-shirts wink I haven’t worked with Fabric.js before, I just knew that it exists. smile 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 beers[https://jsfiddle.net/prisoner849/rr1bsfsj/show/](https://jsfiddle.net/prisoner849/rr1bsfsj/show/)

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

> [@Three.js + Fabric.js but with mouse and touch raycast](https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/34578):
>
> The codebase for this is from this [post](https://discourse.threejs.org/t/three-js-fabric-js/2111) by [prisoner849](https://discourse.threejs.org/u/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 laughing. 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](https://jersey-designer.netlify.app/) it was done by combining [this example](https://discourse.threejs.org/t/three-js-fabric-js/2111) with this [repo](https://github.com/devramkumardnagarajan/3d-Tshirt-design). You can get the code [here](https://github.com/naonvl/threejs-fabricjs-raycast) or try p…

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [January 11, 2024, 1:05am UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/3 "2024-01-11T01:05:59Z")

</div>

> [@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](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

---

<div class="post-metadata">

**Author:** ![Doroftei\_Doroftei](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/doroftei_doroftei/32/40843_2.png) [@Doroftei\_Doroftei](https://discourse.threejs.org/u/Doroftei_Doroftei)\
**Post date:** [August 9, 2024, 9:35pm UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/4 "2024-08-09T21:35:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![uwindu\_iroshan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/uwindu_iroshan/32/60734_2.png) [@uwindu\_iroshan](https://discourse.threejs.org/u/uwindu_iroshan)\
**Post date:** [June 10, 2025, 3:13pm UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/5 "2025-06-10T15:13:06Z")

</div>

![Screenshot (449)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/e/be111b64d9814939642845ad8b8cb9790dde6f92.jpeg)

[watch demo video.](https://www.youtube.com/watch?v=yfISaOWTV7c)

---

<div class="post-metadata">

**Author:** ![Parisa\_Shahbazi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/parisa_shahbazi/32/43776_2.png) [@Parisa\_Shahbazi](https://discourse.threejs.org/u/Parisa_Shahbazi)\
**Post date:** [June 10, 2025, 8:14pm UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/6 "2025-06-10T20:14:21Z")

</div>

It is not open source

---

<div class="post-metadata">

**Author:** ![Mike\_angelo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mike_angelo/32/65169_2.png) [@Mike\_angelo](https://discourse.threejs.org/u/Mike_angelo)\
**Post date:** [June 11, 2025, 4:35am UTC](https://discourse.threejs.org/t/3d-clothes-configurator/60156/7 "2025-06-11T04:35:26Z")

</div>

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](https://www.contrado.com/estore/mobile/options/3158/3deee57b-e497-4382-b9bf-a164a2423630?previewmode=customerbuyingproduct)**