Texture.center not working as expected

Questions
1

I am trying to rotate the image by its center after scaling it down. But I am not getting the expected result. When I set the center to (0.50, 0.50) the image rotates from it’s center but not when it is at the bottom left corner (0.00, 0.00)

fiddle: https://jsfiddle.net/r9qw2s7z/

var height = 200 / window.innerHeight;
var width = canvas.width / canvas.height * height;

texture.repeat.set( 1 / width, 1 / height );

texture.center.x = width / 2.0;
texture.center.y = height / 2.0;
2

Um, not sure I understand. When setting ( 0, 0 ), the result is as expected:

3

no I didn’t mean that. I want to place the image at the bottom left corner which is why I wrote (0.00, 0.00) and rotate it from the center of the image. The expected center should be ( width / 2, height / 2 ) from the bottom left corner. I want to rotate around that point.

I think I should have said this before: I want to place the image at a certain point and be able to rotate the image from its center (not texture.center).

4

Maybe something like this? https://jsfiddle.net/nxqgodfL/

The idea is to use Texture.offset in combination with center.

1 Like
5

oh wow, that is working pretty good! But how will I be able to translate the image anywhere on the texture and still be able to rotate it from its center? I tried changing the offset and the center but everything starts to break apart when I do that.

I added a better image to help identify the center to the fiddle: https://jsfiddle.net/8tygrqj1/

6

Sorry, I do not really understand the way how you compute width and height. The only thing I can say is that you can combine both properties to offset the center of rotation at an arbitrary point. The following fiddle uses a debugging texture that makes this more clear.

https://jsfiddle.net/68m1597z/

2 Likes
7

For height I want the image to be 200px so in texture space it should be 200 / window.innerHeight if I want to match the pixels on the screen. If I wanted it to take 200 pixels on a 1024x1024 texture then I would have divided by 1024 but it wouldn’t have given the correct size on the screen. Note: I am not taking into account the projection matrix’s effect here.

For width I just taken into account the aspect ratio of the image. I then supply all the information to Texture.repeat.

8

After messing around with the numbers in this example https://threejs.org/examples/webgl_materials_texture_rotation.html, I figured it out!

When we have a 2d point (between -1 to 1), to pivot around it do this:

center = 0.5 + p * 0.5;
offset = -p * 0.5;

Fiddle: https://jsfiddle.net/wy1obf80/2/

2 Likes