I load some image Textures on some meshes on gltf.
After that I update them.
For example update scale, position,rotation by offset, repeat,rotation.
I have problem with position .
The texture goes up,up,up but it down from other side of the 3d model.
I have problem about change position to right,left,up,down.
And how can I control the scale of texture? I want to enlarge the texture but not enough to leave the mesh - as big as its own mesh.
Lets check my video and code. Can I set the texture center same as its mesh center?
This is because of how the UVs are mapped on the model.
Model UVs control how the texture is mapped to each triangle… so different parts of your model, the uvs may be upside down or any other angle.
The easiest fix would be to remap your model to have consistent Uvs the way you need them…
We would have to look at your meshes to determine what the current UV layout is…
You want UV layout something like this:
Yes, I think that’s probably the easiest/best solution.
If you had a math / geometry professor on your staff, they may be able to “solve” it mathematically somehow, or using some kind of texture painting techniques, but I think having an artist fix the uvs is probably easier.
If you have the uvs laid out nicely for front and back, then you could even show the texture to the user directly and let them drag the image around in both 2d and 3d. I’ve seen some applications that use http://fabricjs.com/ to allow rotation and placement of decals and text onto the texture of a model, in 2d. Perhaps that approach could work, or perhaps a hybrid of both.
Yeah I have used dxf, but it is a vector based format and not easy to work with in webGL. I prefer GLTF format.
Second question is tricky. Scale is relative in 3d. UV coordinates are always in 0 to 1 space, so… the question doesn’t really mean much.
Also you don’t have control over how the meshes are generated. The author might create UV mapping that uses only a small part of the texture, or uses the whole texture… You could try to find the min/max of the uv coordinates… but… its not super meaningful. I think mostly you want to have the ability to scale your overlays so the user can scale it down if its too big or whatnot.
And visually verify that the arrows are pointing in the correct directions.
But… in a larger sense… this is a really complex problem requiring a lot of experience in 3d.
I put together a glitch that shows some of the complexity.
I converted the UV map into a 3d mesh that you can see alongside the 3d model of the shirt.
I added controls to control the mapping/wrapping/rotation/scale/positioning of the decal on the shirt.
It will be very difficult to constraint all these parameters into something that feels intuitive to use.
I have spent a lot of time on this, so I don’t know how much further I can help you with it, but here it is:
I load the texture on the corresponding mesh
But the center of the texture is not the same as the center of the mesh
And the texture moves and zooms from the bottom left corner, while I want it to happen from the middle.
My main goal is to change the location and size, just like the rotation that you taught in the videos, this happens from the middle (center).
The next thing is that I am writing a program where the user uploads a photo for texture and every photo is different.
How to standardize this photo for the corresponding mesh so that it does not zoom too much
Sometimes the photos are smaller than the mesh and sometimes they are bigger
3D models and meshes and photo textures are constantly changing and are not static.