How Sprite Rotation Works

So far I understand that Sprote objects are rotated using SpriteMaterial.rotation property. I want to know, how this rotation works. I meam along which axis this rotation works? Is this rotation is in world space or objects local space? How to change the rotation center etc. Thank you.

Why not read the docs on Sprite :slight_smile:

Sprite always have the same orientation, as a camera, so take its rotation as around sprite’s local z-axis (on the local XY-plane)

I read about the property called ‘center’, how to set this property? I have a png/svg image as a texture and created the sprite with

let map= TextureLoader.load(image);
let material = SpriteMaterial({map:map});
let sprite = Sprite(material);

Now when i want to rotate the sprite in world space, sprite.rotation.x/y/z doesnt work. The only thing that works is

sprite.material.rotation = value;

How can I visualize the camera axis, and the rotation of my sprite along those axes? I mean just to understand it better. I can not imagine/visualize the scene here, the rotation, camera positiom, XY plane etc. A visual explanation would be better. Can I create the axes in camera local space and view how it is positioned, how things are working etc.

Thank you for your time.

Mahadi Hassan

I’m also interested on how a Sprite can be rotated

What behaviour do you mean? Any reference video or gif?

It is oversimplification, but imagine that a sprite is a sticker on the screen, always facing the user. The only possible rotation is clockwise or counterclockwise. A sprite cannot be flipped over.

From another conversation How can I rotate a Sprite to face particular x,y coordinates? - #4 by prisoner849

I found that the only way to rotate a sprite is to rotate its texture, which is fine. However in my situation I’m trying to rotate a spritesheet texture which causes all sorts of issues with aspect ratio.

So in a nutshell I was looking for a way to rotate the Sprite or its group (on one axis is fine) but not the texture it self. Which from what I gather it is not possible?

If you could share a CodePen that demonstrates the aspect issue, it would be easier to look for solution. Currently I do not understand what is your use case. The best I could guess is this: you have a texture with many sprite images, and you want to show a sprite with only one of the images, and when the sprite is rotated, the image is also rotated, keeping the same size and proportion

As an alternative, you can use a mesh of PlaneGeometry with a modified material.

Instancing + rotation + texture atlas:



Yes that is it pretty much. I’ll see if I can make a simple example.

So I’m guessing there is no other solution in which the sprite is rotated (on Z axis) along with its texture, right?