after load a image to mesh , the image can be scaled and rotated in the center of the texture center(0.5,0.5) and offset(0,0). then if the texture offset changed (move the texture) , the texture rotation still around the center(0.5,0.5) , how to change the center to current position ?
textures are normally set in an editor, like blender. they depend on model UV and how it was unwrapped, they get visually dragged into place. for runtime applications a texture-replace is often the wrong tool, and in most cases you would want a decal which is directly projected onto the surface, which makes positioning, scale and rotation very easy to control.
for example , loading a model online , then paste a sticker on the mesh , then I want the sticker move to the correct place and rotated , and my problem is how to recalculate the new center .
texture.rotation = rotate * Math.PI / 180;
I only can rotated the texture in the center , if the texture moved , the roration not working properly。the rotation center still in the center (0.5,0.5) , I need help for new center .
this is what i mean, you’re most likely looking for a decal, not replacing textures. a decal is like a sticker that you place on top of the mesh.
there is a vanilla example here three.js examples
yes ;this is what i want .actually I just want to recalculate the center of the texture; I don’t know how to calculate the center position by offset and repeat , rotation
const offsetX = texture.offset.x; const offsetY = texture.offset.y; const repeatX = texture.repeat.x; const repeatY = texture.repeat.y; const rotation = texture.rotation; const textureWidth = texture.image.width; const textureHeight = texture.image.height; const transformedCenterX = (0.5 - offsetX) * repeatX; const transformedCenterY = (0.5 - offsetY) * repeatY; const rotatedCenterX = transformedCenterX * Math.cos(rotation) - transformedCenterY * Math.sin(rotation); const rotatedCenterY = transformedCenterX * Math.sin(rotation) + transformedCenterY * Math.cos(rotation); const rotatedTextureWidth = textureWidth * Math.abs(Math.cos(rotation)) + textureHeight * Math.abs(Math.sin(rotation)); const rotatedTextureHeight = textureWidth * Math.abs(Math.sin(rotation)) + textureHeight * Math.abs(Math.cos(rotation)); const finalCenterX = rotatedCenterX + 0.5; const finalCenterY = rotatedCenterY + 0.5; const textureCenterX = finalCenterX / rotatedTextureWidth const textureCenterY = finalCenterY / rotatedTextureHeight
the above code , textureCenterX and textureCenterY not ok , don’t know why ? some one help ?
some one CAN help ?
For the limited spare time that I have, I came up with this demo – a texture that is moved, scaled and rotated, while all operations are relative to the center of the texture. I hope this could help you, more or less.