How to preserve threejs texture scale while applying texture rotation

Question

I'd like to enable a user to rotate a texture on a rectangle while keeping the aspect ratio of the texture image intact. I'm doing the rotation of a 1:1 aspect ratio image on a surface that is rectangular (say width: 2 and length: 1)

Steps to reproduce: In the below texture rotation example

https://threejs.org/examples/?q=rotation#webgl_materials_texture_rotation

If we change one of the faces of the geometry like below:

https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_texture_rotation.html#L57

var geometry = new THREE.BoxBufferGeometry( 20, 10, 10 );

Then you can see that as you play around with the rotation control, the image aspect ratio is distorted. (form a square to a weird shape)

At 0 degree:

At some angle between 0 and 90:

I understand that by changing the repeatX and repeatY factor I can control this. It's also easy to see what the values would be at 0 degree, 90 degree rotations.

But I'm struggling to come up with the formula for repeatX and repeatY that works for any texture rotation given length and width of the rectangular face.

Is this what you need? github.com/mrdoob/three.js/issues/1847 — gaitat
@gaitat Thanks for suggesting it, I already read that, all that article issue shows is which property to change for editing scale and offset. I already know that it can be done by editing those properties. But the problem is if there's a way to change those properties without distorting the scale of the original image. — noob Mama
This looks like a trigonometry problem. If you can set up a JSfiddle or similar I will look into it... — Tom
I'm not entirely sure what your finished result should look like. Are you trying to apply rotations while maintaining the wide rectangles without getting the stretched "diamond" look? — Marquizzo

Marquizzo Marquizzo · Accepted Answer · 2020-02-28T21:54:23

Unfortunately when stretching geometry like that, you'll get a distortion in 3D space, not UV space. In this example, one UV.x unit occupies twice as much 3D space as one UV.y unit:

This is giving you those horizontally-skewed diamonds when in between rotations:

Sadly, there's no way to solve this with texture matrix transforms. The horizontal stretching will be applied after the texture transform, in 3D space, so texture.repeat won't help you avoid this. The only way to solve this is by modifying the UVs so the UV.x units take up as much 3D space as UV.y units:

With complex models, you'd do this kind of "equalizing" in a 3D editor, but since the geometry is simple enough, we can do it via code. See the example below. I'm using a width/height ratio variable to use in my UV.y remapping, that way the UV transformations will match up, regardless of how much wider it is.

//////// Boilerplate Three setup
const renderer = new THREE.WebGLRenderer({canvas: document.querySelector("canvas")});
const camera = new THREE.PerspectiveCamera(50, 1, 1, 100);
camera.position.z = 3;
const scene = new THREE.Scene();

/////////////////// CREATE GEOM & MATERIAL
const width = 2;
const height = 1;
const ratio= width / height;  // <- magic number that will help with UV remapping
const geometry = new THREE.BoxBufferGeometry(width, height, width);

let uvY;
const uvArray = geometry.getAttribute("uv").array;

// Re-map UVs to avoid distortion
for (let i2 = 0; i2 < uvArray.length; i2 += 2){
  uvY = uvArray[i2 + 1];  // Extract Y value, 
  uvY -= 0.5;             // center around 0
  uvY /= ratio;           // divide by w/h ratio
  uvY += 0.5;             // remove center around 0
  uvArray[i2 + 1] = uvY;
}
geometry.getAttribute("uv").needsUpdate = true;

const uvMap = new THREE.TextureLoader().load("https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/uv_grid_opengl.jpg");

// Now we can apply texture transformations as expected
uvMap.center.set(0.5, 0.5);
uvMap.repeat.set(0.25, 0.5);
uvMap.anisotropy = 16;

const material = new THREE.MeshBasicMaterial({map: uvMap});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

window.addEventListener("mousemove", onMouseMove);
window.addEventListener("resize", resize);

// Add rotation on mousemove
function onMouseMove(ev) {
	uvMap.rotation = (ev.clientX / window.innerWidth) * Math.PI * 2;
}

function resize() {
	const width = window.innerWidth;
	const height = window.innerHeight;
	renderer.setSize(width, height);
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
}

function animate(time) {
  mesh.rotation.y = Math.cos(time/ 3000) * 2;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

resize();
requestAnimationFrame(animate);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://threejs.org/build/three.js"></script>
<canvas></canvas>

How to preserve threejs texture scale while applying texture rotation

2 Answers