## Transformations
## Rotation Quaternions
A quaternion is a four-dimensional vector (x, y, z, w), and to be a rotation quaternion it has to be a unit vector; i.e. x2 + y2 + z2 + w2 = 1.

We have already used *rotate*, which sets the rotation quaternion of a mesh.

You can check this in the console:

```javascript
mesh.rotate(new BABYLON.Vector3(1, 0 -1), Math.PI / 3, BABYLON.Space.WORLD);
console.log(mesh.rotationQuaternion.x);
console.log(mesh.rotationQuaternion.y);
console.log(mesh.rotationQuaternion.z);
console.log(mesh.rotationQuaternion.w);
```
Like the *rotation* property, the *rotationQuaternion* property sets the orientation of the mesh with the local origin as the center of rotation.

Besides *rotate* you can also obtain a rotation quaternion directly by using, for example

```javascript
mesh.rotationQuaternion = new BABYLON.Quaternion.RotationAxis(new BABYLON.Vector3(1, 0, -1), Math.PI / 3);
```
The parameters for the *RotationAxis* method are axis direction and angle. The axis direction vector should be expressed in the world space.

Any rotation quaternion can be converted to Euler angles for use with *mesh.rotation*:

```javascript
const euler = rotation_quaternion.toEulerAngles();
```

Showing that converted Euler angles to and from rotation quaternion align. <Playground id="#DN4IPH" title="Converting Euler to Quaternion Alignment" description="Simple example showing that converted Euler angles to and from rotation quaternion align."/>

You can also change the orientation of a mesh using a number of different conventions.

## Warning
You cannot use a *rotationQuaternion* followed by a *rotation* on the same mesh. Once a *rotationQuaternion* is applied, any subsequent use of *rotation* will produce the wrong orientation unless the *rotationQuaternion* is first set to null. Please be aware that this often applies when importing models, as many of them already have a *rotationQuaternion* set. 

From version 4.0 onward, `rotationQuaternion` is set to null automatically when, and only when, *rotation* is set directly with a vector, for example:
```javascript
mesh.rotation = new BABYLON.Vector3(0, 0, 0)
```

Whenever you find rotation errors it is worth setting *rotationQuaternion* to null before updating *rotation*.

## Transformations

## Target Axes Alignment
When you want to rotate a mesh (or a camera) so that it lines up with a given set of axes, you can use the *RotationFromAxis* method as follows:

```javascript
var orientation = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3);
mesh.rotation = orientation;
```
where _axis1_, _axis2_, and _axis3_ are three left-handed orthogonal vectors, and the mesh will be aligned with 

* _axis1_ as the x axis in its local space
* _axis2_ as the y axis in its local space
* _axis3_ as the z axis in its local space


## Align Plane to Curve
At any point along a curve in 3D space, the tangent, normal, and binormal form a set of orthogonal axes; call these the point axes. A plane created in Babylon.js has a normal along the z axis, with the x and y axes lying in the plane. We can draw a curve in space using an array of position vectors. By creating a [3D path](/features/featuresDeepDive/mesh/path3D) from this curve, we can obtain the normal, tangent, and binormal of the curve at each of the positions that define it. Using *RotationFromAxis*, we can align the x, y, and z axes of the plane with the point axes of the curve. There are 6 ways to order a group of three axes, and therefore 6 ways to align the plane axes to the curve point axes.

All six ways are used in the playground below. The top one [0] has the plane tangential to the curve and the fourth one down [3] is perpendicular to the curve. Others can twist the plane at certain points. 

<Playground id="#1PX9G0" title="Aligning a Plane To a Curve" description="Simple example of aligning a plane to a curve."/>

## Refining Alignment

To help understand which of the 6 possible arrangements to use, it is useful to show the axes of the mesh that you want to follow the line, along with the tangents, normals, and binormals of the path.

For example, we want a cone to follow along a path with its point first, and with the height axis of the cone tangent to the path.

Below is an image showing the cone axes and the path tangents, normals, and binormals at the start of the path, before any alignment with the path takes place.

![Align Axes](/img/how_to/Mesh/alignaxes.webp)

Our example requires the y axis of the cone to lie along the tangents of the path. Placing the x axis of the cone along the normals of the path would leave the z axis pointing in the opposite direction to the path binormals. This gives us the y axis along the tangents, the x axis along the binormals, and the z axis along the normals. This is option 4.

```javascript
new BABYLON.Vector3.RotationFromAxis(binormals[p], tangents[p], normals[p]);
```

<Playground id="#LHX6CI" title="Aligning a Cone To a Curve" description="Cone axis aligned to curve tangents"/>

## Align Camera
Given two spheres, draw a plane between them that always faces the camera. We are going to set up red and green spheres, world axes shown as red, green, and blue lines, and a purple plane in the xz plane. Joining the red and green spheres is a plane with a blue arrow on it pointing from the green sphere to the red sphere.

The requirement is for the arrow plane to rotate such that 

* one of its orthogonal axes that lies on the arrow is along the line joining the two spheres;
* the other axis lying on the arrow plane is perpendicular to the camera lens;
* the axis normal to the plane is along the line joining the middle of the arrow to the camera. 

In this way, the camera always faces the arrow plane, as can be seen in this playground.

<Playground id="#VYM1E#32" title="Aligning Camera Axes" description="Simple example of aligning camera axes."/>

This is achieved by forming axis 1 to join the spheres, axis 3 to be perpendicular to axis 1 and to the axis through the camera position, and axis 2 to run from the camera to the arrow plane:

```javascript
axis1 = (sphere1.position).subtract(sphere2.position);
axis3 = BABYLON.Vector3.Cross(camera.position, axis1);
axis2 = BABYLON.Vector3.Cross(axis3, axis1); 
``` 
The mesh is rotated to face the camera using:

```javascript
mesh.rotation = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3);
```

## Using Quaternions 
If you prefer using quaternions instead of Euler angles, then *RotationQuaternionFromAxis()* computes the required rotation quaternion to assign to the mesh property *rotationQuaternion*.

## Transformations
## Sequencing Rotations
When you use the **rotation** method on a mesh, the rotation is applied in local space first around the y axis, then the x axis, and finally the z axis. How, then, do you rotate a mesh around a custom sequence of axes? This involves rotation quaternions, either implicitly or explicitly.

## Add Rotation
The simplest way is to use the addRotation method, *addRotation(x, y, z)*, with two zero parameters. For example, both of these code snippets

```javascript
mesh.addRotation(Math.PI / 2, 0, 0);
mesh.addRotation(0, 0, Math.PI / 3);
mesh.addRotation(0, Math.PI / 8, 0);
```

```javascript
mesh.rotation.addRotation(Math.PI / 2, 0, 0).addRotation(0, 0, Math.PI / 3).addRotation(0, Math.PI / 8);
```

will take the current rotation of the mesh and further rotate it by &pi;/2 about the x axis, then by &pi;/3 about the z axis, and then by &pi;/8 about the y axis.

Using non-zero x, y, and z values with addRotation adds rotations in the order y, x, z.

The internal calculations convert the Euler angles to rotation quaternions and back again.

Sequence using addRotation: <Playground id="#HPKH80" title="Sequence Rotations Using addRotation" description="Simple example of sequencing rotations with addRotation."/>

## Rotate
Imagine a disc with an axis through its center. The disc is able to rotate about the axis. The image below shows the disc at several different rotation points around the axis.

![disc rotate](/img/how_to/Mesh/quat1.webp)

For all rotations of the disc the axis can be tilted as seen in the diagram below.

![disc rotate and axle tilt](/img/how_to/Mesh/quat2.webp)

Specifying a direction vector for an axis along with an angle is an alternative way to produce a rotation. This is how the *rotate* method is used, either in world space or local space. 

```javascript
mesh.rotate(new BABYLON.Vector3(1, 0 -1), Math.PI / 3, BABYLON.Space.WORLD);
```

```javascript
mesh.rotate(new BABYLON.Vector3(1, 0 -1), Math.PI / 3, BABYLON.Space.LOCAL);
```

Three useful vectors are predefined:

```javascript
BABYLON.Axis.X;
BABYLON.Axis.Y;
BABYLON.Axis.Z;
```
The *rotate* method is also additive. For example, this code

```javascript
mesh.rotate(new BABYLON.Vector3(2, -3, 7), Math.PI / 3, BABYLON.Space.LOCAL); 
mesh.rotate(BABYLON.Axis.Y, -Math.PI / 2, BABYLON.Space.WORLD);
mesh.rotate(new BABYLON.Vector3(5.6, 7.8, - 3.4), 1.5 * Math.PI, BABYLON.Space.WORLD);
mesh.rotate(BABYLON.Axis.Z, -Math.PI, BABYLON.Space.LOCAL);
```

will start with the current orientation of the mesh, then add a rotation of &pi;/3 about the given local space axis, followed by a rotation of -&pi;/2 about the world y axis, then a rotation of 1.5&pi; about the given world axis, and finally a rotation of -&pi; about the local z axis.

### Examples
Earth rotates on tilted axis: <Playground id="#TLIAXS#307" title="Earth Rotating On A Tilted Axis" description="Simple example of the earth rotating on a tilted axis."/>
Using mixed rotate World and Local: <Playground id="#Z3W74Y#1" title="Using Mixed Rotate World and Local" description="Simple example using mixed rotate World and Local."/> 
Two cubes one rotates in World Space other in Local Space: <Playground id="#66EBY3#3" title="2 Cubes Rotating in World and Local Space" description="Simple example of 2 cubes rotating in world and local space."/> 
Purple rotates in World Space, brown Local Space: <Playground id="#LLNE9E#72" title="Purple and Brown rotation in World and Local Space" description="Simple example of 2 colored objects rotating in world and local space."/>

The use of *rotate* sets the orientation of the mesh using a rotation quaternion and subsequently there can then be issues trying to set the orientation of the mesh using *rotation*.

It is now time to look more closely at rotation quaternions.