## 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);
```
The same as 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 to 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 this often applies when importing models as many of these models already have a *rotationQuaternion* set. 

From version 4.0 onwards, the setting of rotationQuaternion to null is done 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 set of given 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 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 the *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 so 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 undertand which of the 6 possible arrangements it is useful to show the axes of the mesh that you want to follow the line and the tangents, normals and binormals of the path.

For example, we want a cone to follow along a path point first and with the height axes of the cone tangental 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.png)

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 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, show 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 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 the 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

```javascript
axis1 = (sphere1.position).subtract(sphere2.position);
axis3 = BABYLON.Vector3.Cross(camera.position, axis1);
axis2 = BABYLON.Vector3.Cross(axis3, axis1); 
``` 
axis 3 to be perpendicular axis 1 and to the axis through the camera position and axis 2 from the camera to the arrow plane.

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 then the rotation is applied in local space first around the y axis, then the x axis and finally about 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 sets of code

```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 form the current rotation of the mesh further rotate it &pi;/2 about the x axis, then &pi;/3 about the z axis then &pi;/8 about the y axis.

Using non zero x, y and z values with addRotation will add rotations in the order y, x, z.

The internal calculations for addRotations 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.jpg)

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.jpg)

Specifying a direction vector for an axis along with an angle is an alternative way of producing 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 both this set of codes 

```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, the add to this a rotation of &pi;/3 about the given local space axis, then add a rotation of -&pi;/2 about the world y axis, the add a rotation of 1.5&pi; about the given world axis and finally add a rotation of -&pi; about the local z axis.

### Examples
Earth rotates on tilted axis: <Playground id="#TLIAXS#" 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*.

About time to look further at rotation quaternions.