About Scale and Rotate a image texture , how to set the texture center

Questions
1

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 ?

2

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.

3

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.center.set(0.5, 0.5);
texture.offset.set(0, 0);
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 .

1 Like
4

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

5

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

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

7

some one CAN help ?

8

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.

https://codepen.io/boytchev/full/QWzbpoK

1 Like