Scale, translate, and rotate three.js texture

Questions
1

Hi!

I’ve been looking around three.js community for any examples of texture rotation AND cropping but haven’t found much on the topic. I hope someone could lead me in the right direction.

To the point. Let’s say I want to scale a texture up around the texture’s center point:

texture.center = new THREE.Vector2(0.5, 0.5);
texture.repeat.set(0.438, 0.438);

The texture is scaled up and it’s “new” center point is the texture center.

Now let’s say I want to rotate the texture, I want to rotate the texture 96.3 degrees counter-clockwise, which is about 1.68 radians. HOWEVER, I want to rotate about the top left corner, (0, 0). I write:

texture.center = new THREE.Vector2(0, 0);
texture.rotation = 1.68;

Now here’s the issue. Because I have two lines overwriting the center for two different purposes, first to set the texture’s view area(after scaling) and then as an anchor point for rotation, the first is overwritten. I receive an unexpected result where my view area is in the top left quadrant where I expected a centered view area.

If it came across confusing, I can supply some examples. But essentially, texture.repeat and texture.rotation are both dependent on texture.center. How do you do if you want to use both?

I initially thought I could scale the texture around the center. Grab the texture’s pixel data and send it to another texture instance where I perform rotation, but that doesn’t seem viable. Any help is appreciated!

2

Option A - modify UVs instead of the texture (if the texture applied only to a single mesh.)

Option B - Create a CanvasTexture, draw your texture to its canvas and modify it using CanvasAPI - it already has all the translations, rotations, and scaling you’ll ever need :relieved: (plus you can access raw pixel data right from the canvas context.)

3 Likes
3

Option B is such a neat “workaround” and performant enough for my use case. You just saved me a bunch of hours attempting different approaches. Thank you!