Rotate object with its own local axis

Questions
,
1

Hello,

I have 3 integers as input which correspond to degree values. I want to use these to rotate a 3D object in React-Three-Fiber. Everything works fine, but the rotation order is such that if I rotate the object, the local axis does not move along. This is unfortunate as there can be first an X-axis rotation, THEN Y axis rotation etc. and this leads to unexpected rotations of the object.

The way I include the object into the canvas is as follows whereby xrot,yrot,zrot represent the rotations (translated from degrees to radians):
<primitive rotation={[xrot , yrot , zrot ]} position={[0, 0, 0]} object={object} scale={scale} />

I would appreciate any help. Thanks!

EDIT: To make my problem a bit clearer, some images:

  • In Image1 only a 60 degree rotation around the x-axis is being made.
  • In Image2 (reupload) first a 65 degree rotation around the y-axis is being made and afterward for the same object in Image3 a 41 degree rotation around the x-axis is being made and we can see that the local coordinate system is not following the object after the first rotation in the y-axis (I assume) or maybe it just always follows the global coordinate system? This is the problem. I want to make the rotations as generic as possible so an object can be rotated in the order z-y-x-y-z-x or x-z-y-x-z-y-z or all other possibilities without changing the rotation pattern.

EDIT2: I think I know at least what my problem is called now: Gimbal Lock (Gimbal lock - Wikipedia). The solution seems to be Quaternion as @PavelBoytchev and @hofk already suggested, so I will try this out now with react-three-fiber and update this post if I am going to be successful.

EDIT3: As @PavelBoytchev and @hofk suggested, the usage of Quaternions solved the problem. Thanks!

The cube is from sketchfab: Rubix cube [low poly] - Download Free 3D model by Doilt [30a2e00] - Sketchfab

Image3
Image31137×512 23.1 KB

Image2
Image21137×512 20.9 KB

Image1
Image11137×512 19.6 KB

2

While waiting for an answer from React-Three-Fiber experts (I am not!), check the following: when rotations in Three.js are defined with angles, they are Euler angles consisting of three angles and order of rotation. By default the order is XYZ, but you can change it to ZYX, YXZ or any other combination of X, Y and Z.

3

Hey, thats an interesting insight, thanks! Unfortunately, I want the order of rotation to be completely independent as I can not predict when the user will make which rotation first and I thought that the solution might be to rotate the axis for each rotation along. Maybe my thoughts are wrong, so someone can correct me. I am also interested in the theoretical concepts, if someone has an idea where I am thinking wrong.

Anyway, Thanks again!

4

In your example you shows setting of the three angles at once. If you want to modify angles individually, and in any order, this is also possible.

In mannequin.js I resolve this problem by reordering. This is, I do not know in what order the user wants to rotate an element, so before accessing a rotation angle, I reorder it (using the method reorder):

setX( angle ) {
	this.rotation.reorder( 'YZX' );
	this.rotation.x = angle;
}

setY( angle ) {
	this.rotation.reorder( 'ZXY' );
	this.rotation.y = angle;
}

setZ( angle ) {
	this.rotation.reorder( 'YXZ' );
	this.rotation.z = angle;
}

There are alternatives, that you might also consider:

5

Maybe this can help you with that?
Quaternion - Axis, Angle Visualization
Quaternion - method .setFromBasis( e1, e2, e3 )

1 Like
6

Thanks, I will look into these! I will start with Quaternion as also suggested by @hofk! I also edited my post with examples if this may help, but thank you already anyway!

7

Thank you! I will look into this. Quaternion seems like a big topic as I could not really grasp it really fast, but I will try doing so now. I edited my post with examples, so it would be wonderful if you could tell me if I am on the right path with Quaternion, but already thanks anyway!

8

In this example from the collection, I use quaternions. Maybe you can experiment with it to understand it better: FlightRouteQuaternion