Help Me Please - 3D Modelling tool

Hey everyone!
I’m trying to develop 3D tool on my website where users can choose a piece of clothing like a t-shirt or jacket and add their own custom designs to it.

I currently have the scene set up and I’m loading a custom model of a t-shirt I got online.
I also have a drop-down menu on the actual html which changes the color of the model.

The final part I am struggling with is:
-I want users to be able to upload an image and that image to get rendered as a texture onto the mesh
- After the image is uploaded I want to allow users to be able to position the image where ever they like on the model.

I’m really not sure how to go about this, so could someone help me out?

Thanks in advance

Hi @Mitko10343 and welcome to the forum. Here is one way using the uOffset and vOffset properties on a material.
small image in large white space - Babylon.js Playground
whole image - https://www.babylonjs-playground.com/#08GVKY#1

There could well be better methods (for example Use decals - Babylon.js Documentation is worth a read)

2 Likes

Hey @JohnK.
Thanks for the quick reply. I did what you suggested and did get a case working where I added a texture to the my mesh and if I clicked on the mesh and dragged the cursor the texture would rotate around the mesh. How ever I’m stuck again.
The problem I’m having now is that the original mesh of the t-shirt that imported should have a base texture, like a texture for cloth with a bump map, and then on top of that I need to be able to add another image, like a decal and be able to position it, by clicking on that decal and dragging the cursor around. In short, the decal needs to be sliding over the base texture. I looked into multi materials, but I’m not sure how to apply them to the custom mesh I imported and even then, I don’t think I will be able to position individual materials on the mesh using a mouse click.
I realize this is a very unusual project I’m working on, but if you have any idea other ideas how I could do it, it would be much appreciate it.

Is this what you need https://www.babylonjs-playground.com/#08GVKY#2 ?

2 Likes

hi please drag by right click

https://www.babylonjs-playground.com/#BBTRQD#7

move on UV state with scale 5

3 Likes

@JohnK Yes, this is what I want to be able to do, but just allow the user to control it, just like @nasimiasl’s example.

1 Like

Love it!. Could be very useful.

super cool!

Hey HCmetal, you should message me! We are working on similar projects (in a way) and Id love to see what you are working on and bounce ideas.