3D Merch Configurator

Showcase
,
21

Screenshot (449)
Screenshot (449)1920×974 212 KB

watch video

1 Like
22

Hey guys,

I am learning to build 3d product configurator. Can you guys please help me out in this. I am impressed from your work and want to build similar product. Please guide me.

Thanks,
Ankit

23

Hello, u can start from this thread Three.js + Fabric.js but with mouse and touch raycast

24

Hello,

Thanks for your reply.
So following this I would I be able to create a 3d configurator web app. Could help me out by providing a sample repo where I can take reference and clone the repo and start learning from it.

Looking forward to your reply.

Regards,
Ankit

25

the code mentioned on that thread

26

Hello,

I’m currently working on a jersey customizer web app and have hit a roadblock with the logo customization feature. Specifically, I’m trying to display customization tool icons (such as scale, duplicate, rotate, and delete) at the four corners of the uploaded logo. However, I’m having trouble positioning the icons correctly—they’re not appearing perfectly on the corners as intended.

I’m inspired by the work done on this site and aiming to build a similar experience. My work https://3d-configurator-weld.vercel.app.

Any guidance or suggestions on how to properly implement this feature would be highly appreciated!

Thanks,
Ankit

27

That’s great! u could just follow this documentation Fabric.js add offset -5 or 5 based on the x,y position

28

Hello,

Can we connect to discuss a 3d product configurator project ?

30

Hi, your 3D merch configurator work looks really helpful.

I am building a sportswear catalogue/customizer in Next.js with Three.js / React Three Fiber. The goal is to let users customize jerseys, hoodies, shorts, and tracksuits with color changes, logos, names, and numbers.

I am still new to the 3D asset pipeline, so I am trying to understand the right approach before going too deep.

A few things I wanted to ask:

  1. Did you use separate meshes/materials for parts like body, collar, sleeves, cuffs, etc., or did you use one texture/UV map for the whole garment?

  2. For logos, names, and numbers, did you use decals, canvas textures, or some other method?

  3. What was your workflow for preparing the 3D models before using them in Three.js? For example, Blender cleanup, UV mapping, GLB export, texture compression, etc.

  4. If you are able to share any source code, even a simplified version, that would be very helpful. If not, even guidance on the architecture or main steps would help a lot.

I am not trying to copy your full project. I just want to understand the correct way to build this kind of configurator without going down the wrong path.

Thanks in advance.

31

Hi,

Basically every elements on the demo was an SVG file loaded into fabricjs canvas, and then use that canvas as CanvasTexture for the 3d model. By modifying the fabricjs objects, you will have the ability to design with 3d preview.

I suggest u follow my thread here Three.js + Fabric.js but with mouse and touch raycast - #43 by Andrew_Bilous there u can read there’s a link to prisoner849 post where he shared the foundation of what i’ve built.

32

Although i don’t think my approach is a “correct way” to build this, but using canvas texture i believe is the most viable solution at the moment. But if u look around many 3d jersey configurator has really sharp svg texture on the 3d model, to this moment i’m still wondering how they achieve sharp & clear texture with canvas texture.

33

+2 years later, apparently i have to set enableRetinaScaling to false for fabricjs canvas to prevent ios to forced the browser to render with retina scaling, which is twice the resolution, so 2048px will be 4096px.

1 Like