Change position of the texture on a layer(mesh)

Questions
, , , , , ,
1

Hi
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?

for scale I use:

     activeTexture.repeat.x +=0.5;
     activeTexture.repeat.y +=0.5;

    activeTexture.repeat.x -=0.5;
    activeTexture.repeat.y -=0.5;
    activeTexture.needsUpdate=true;

for rotation I use :slight_smile:

activeTexture.rotation += Math.PI *0.05
        activeTexture.center.x = 0.5
        activeTexture.center.y = 0.5
        activeTexture.needsUpdate=true;

for position I use. :slight_smile:


activeTexture.offset.x+= 0.1
activeTexture.offset.y += 0.1

But position does not work correctly
check this video:

2

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:

image
image1800Ă—1340 184 KB

and what you probably have now is something like this:

image

2 Likes
3

Thanks.
Finally, in three.js we can not solve it.
It should be solved by 3d modeler.

1 Like
4

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.

1 Like
5

thanks
Yes fabric.js is good for 2D.
Did you work with a .dxf file ?

And I have another question. I load different 3d models that I do not know the scale etc. And I want to transform texture to prevent too large and outside of the 3d model. What is a solution?

6

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.

2 Likes
7

UV mapping/unwrapping is the best approach, there are two other options I can think of.

1_ MultiMaterial: create a second material, set your group draw range, targeting the area you want your texture over, effectively redrawing the texture over the first material.

2_ use decals: with some draw backs (here and here and some others), check the examples discussed in the thread below.

8

Let’s check this image.
I created a texture and set it for 3 geometries One is a sphere one is a cube and another is one of the mesh in a t-shirt .

I want to know how can I understand that is the uv of the 3d model correct or not?

Screenshot 2024-01-19 at 6.00.39 PM
Screenshot 2024-01-19 at 6.00.39 PM911Ă—693 239 KB

9

You can apply a texture like: simple arrow left right up down vector 4818014 Vector Art at Vecteezy

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:

View only link:
https://sly-roomy-snake.glitch.me

Code link:

I’m happy to answer more questions about it, but… I’ve probably spent about 20 hours on this thing so far, so please keep in mind that we are all unpaid volunteers here. :smiley:

Cheers!

1 Like
10

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.

11

thanks a milion sir.
But I could not understand what is the issue of uv