Why Texture Rotation on Side of Rectangular Cuboid is Skewed

Questions
1

Rotating the same texture with repeatWrapping on Cube Side keeps the dimensions same.
But on the sides of a Rectangular Cuboid rotating the texture make it skewed.

textuer_cuboid_issue_01
textuer_cuboid_issue_01880×960 204 KB

2

Are you referring on this output? https://jsfiddle.net/rv41cb5g/

If so, then this is the expected behavior since the uv coordinates are equal for all sides of the cube. Making the cube larger in x-direction will stretch the texture on the respective sides. This becomes obvious if you set the rotation property to zero in the live demo. The cells of the debug texture are not longer quads.

3

Can be fixed with re-computing of UVs for desired sides:

    var uvs = geometry.getAttribute("uv");
    var t = new THREE.Vector2();
    for(let i = (4 * 2) - 1; i < (4 * 6); i++){
    	t.fromBufferAttribute(uvs, i);
        t.x = t.x * 2;
        uvs.setX(i, t.x);
    }
    uvs.needsUpdate = true;

https://jsfiddle.net/prisoner849/yb3fLgwh/

изображение

2 Likes
4

It worked for Cuboid.