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:
- methods rotateX, rotateY and rotateZ that can be executed in any order
- methods rotateOnAxis and rotateOnWorldAxis
- implement rotations via matrix
- implement rotation via quaternion