## 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.rotation.addRotation(Math.PI / 2, 0, 0);
mesh.rotation.addRotation(0, 0, Math.PI / 3);
mesh.rotation.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.

## Transformations
## Baking 
Usually, within Babylon.js, positioning, rotating and scaling a mesh changes its world matrix only and the vertex position data of a mesh is left unchanged. In certain situations you might be interested in applying a transform (position, rotation, scale) directly to the mesh vertices and leave world matrix unchanged. This is called baking and, of course, changes the center of transformation of the mesh, and can be useful in the following situations:

- building a set of static geometry
- randomizing a series of mesh copies
- mirroring a mesh along an axis
- etc.

The most straight forward way is to apply a transformation to the mesh. For example take a box of side 1 and position it at (0, 3, 0). Its vertices are stored as (-0.5, -0.5, -0.5), (0.5, -0.5, -0.5), (0.5, 0.5, -0.5), (-0.5, 0.5, -0.5), (-0.5, -0.5, 0.5), (0.5, -0.5, 0.5), (0.5, 0.5, 0.5), (-0.5, 0.5, 0.5) with its local origin of (0, 3, 0) stored in the world matrix. When this current transformation is baked into its vertices, the vertices are now stored as (-0.5, 2.5, -0.5), (0.5, 2.5, -0.5), (0.5, 3.5, -0.5), (-0.5, 3.5, -0.5), (-0.5, 2.5, 0.5), (0.5, 2.5, 0.5), (0.5, 3.5, 0.5), (-0.5, 3.5, 0.5) with a local origin of (0, 0, 0) stored in the world matrix. Any rotation now takes place with the center of rotation 3 below the middle of the box.

Baking a current transformation: <Playground id="#6AH5EL" title="Baking Current Transformation" description="Simple example of baking current transforms."/>

When the current transformation is baked into the mesh the local origin of the mesh is also altered so that the location and orientation of the mesh within the seen is not changed.


There is also a method, _bakeTransformIntoVertices_, to bake a matrix as a transformation into the vertices. This will bake the transformation provided by the matrix directly into the mesh vertices changing their values but leaving the world matrix unchanged.

usage:
```javascript
mesh.bakeTransformIntoVertices(matrix);
```

Baking using matrices <Playground id="#6AH5EL#1" title="Baking Using Matrices" description="Simple example of baking using matrices."/>

## Use With Scaling

When baking scaling the normals are simply scaled in their current direction and so baking a scale can often give unrealistic results for lighting. To correct this normals need to be recomputed. This is illustrated in the following picture: 

![Normals illustration](/img/resources/baking-transforms/normals.png) 

_In the above picture, you can see an untransformed mesh on the left, the same mesh with a baked scaling along the X axis in the middle and on the right, the mesh with its normals correctly recomputed._


You can do a recomputation of your normals like so:

```javascript
var indices = mesh.getIndices();
var normals = mesh.getVerticesData(VertexBuffer.NormalKind);
BABYLON.VertexData.ComputeNormals(positions, indices, normals);
mesh.updateVerticesData(VertexBuffer.NormalKind, normals, false, false);
```

**Note:** recomputing the normals of your mesh may not be an ideal solution, as the results may be wrong in some parts of the mesh (e.g. seams on a sphere).

Unless you have good reasons to use baking transformations then your are better with parents and pivots.


## Transformations
## Position
In order to fully understand all the ways to locate a mesh in the scene we need to know about frames of reference. When creating a world in a scene we are using a frame of reference in the **World Space**. In Babylon.js world space there are two horizontal axes, x and z, and a vertical y axis in a left handed system.

Each mesh in the scene also has its own **Local Space**.  Meshes are created with their local space origin at the world space origin and with their local space x, y and z axes aligned with the x, y and z axes of the world space. Most, in not all, of the well known shapes have their local origin at the center of the mesh. The relative position of the local origin to the mesh shape depends on the data sets used in their construction.

Consider a mesh with its local origin in world space at (-1, 2, 1), that is mesh.position is at (-1, 2, 1);
Babylon.js has a number of ways to reset the location a mesh. These are listed in the code below. The comments show the location of the local origin of the mesh in world space after each way has been applied.

The following are true for a mesh whether it has been rotated or not.

```javascript
mesh.position = new Vector3(2, 3, 4);//(2, 3, 4)
mesh.position.addInPlace(new Vector3(2, 3, 4)); //(-1 + 2, 2 + 3, 1 + 4) = (1, 5, 5)
mesh.translate(new BABYLON.Vector3(2, 3, 4), 1, BABYLON.Space.WORLD); //(-1 + 2, 2 + 3, 1 + 4) = (1, 5, 5)
```

```javascript
mesh.position.x = 2; //(2, 2, 1)
mesh.position.y = 3; //(2, 3, 1)
mesh.position.z = 4; //(2, 3, 4)
```

```javascript
mesh.position.x += 2; //(-1 + 2, 2, 1) = (1, 2, 1)
mesh.position.y += 3; //(1, 2 + 3, 1) = (1, 5, 1)
mesh.position.z += 4; //(1, 5, 1 + 4) = (1, 5, 5)
```

The following depend on the orientation of the mesh, so that it is not possible to give a resulting location.

```javascript
mesh.translate(new BABYLON.Vector3(2, 3, 4), 1, BABYLON.Space.LOCAL);
mesh.setPositionWithLocalVector(new BABYLON.Vector3(2, 3, 4));
mesh.locallyTranslate(new BABYLON.Vector3(2, 3. 4));
```
The vectors for *position* and *setPositionWithLocalVector* are position vectors. Those for *translate*, *locallyTranslate* and *addInPlace* are direction vectors.

These images show how, using the last three methods in local space, the orientation of the mesh affects its final position in world space.

![no rotation](/img/getstarted/translate1.png)&nbsp;&nbsp;&nbsp;![with rotation](/img/getstarted/translate2.png)

The given vectors are applied in the local space of the mesh, the axes of which rotate with the mesh.


## Transformations
## Introduction to Coordinate Transformation

The first step in understanding coordinate transformation Babylon.js is to understand how the data describing a mesh is stored. The positions of each vertex is kept in an array of coordinates in the local space of the mesh. Each transformation applied to the mesh is stored in a matrix called the *World Matrix*. For each rendered frame the current *World Matrix* is used on the local space vertex data to obtain the world data for the mesh. Except for exceptional circumstance such as *baking a transformation* or a user updating it, the mesh vertex data remains unchanged. 


When you want one mesh, mesh_C, to locate in the frame of reference of another mesh, mesh_P, using coordinate transformation you use the the _transformCoordinates_ function to apply the *World Matrix* of mesh_P to the required position.

For example take mesh_P to be a box, a cube of size 1. In the local space of the box the center of the top face is at (0, 0.5, 0). Move and rotate this box to a new position. We want mesh_C, a sphere, to be located at the center of the top face of the box at this position. To do this use

```javascript
const matrix = mesh_P.computeWorldMatrix(true); //true forces a recalculation rather than using cache version
const local_position = new BABYLON.Vector3(0, 0.5, ,0); //Required position of C in the local space of P
const global_position = BABYLON.Vector3.TransformCoordinates(local_position, matrix); //Obtain the required position of C in World Space
mesh_C.position = global_position;
```

Position sphere using TransformCoordinates: <Playground id="#TRAIXW" title="Position a Sphere Using Transform Coordinates" description="Simple example of positioning a sphere using transform coordinates."/>

To translate the sphere by the direction vector (1, 1, 1) for example you can add this to the current local position vector

```javascript
const matrix = mesh_P.computeWorldMatrix(true);
const local_position = new BABYLON.Vector3(0, 0.5, 0);
local_position.addInPlace(new BABYLON.Vector3(1, 1, 1));
const global_position = BABYLON.Vector3.TransformCoordinates(local_position, matrix);
mesh_C.position = global_position;
```

Translate sphere using TransformCoordinates: <Playground id="#TRAIXW#1" title="Translate a Sphere Using Transform Coordinates" description="Simple example of translating a sphere using transform coordinates."/>

More extensive examples follow


## Transformations
## Rotation
Rotation in 3D space is always tricky. The order in which rotations are applied and the frame of reference used changes the final orientation of a mesh. There is a range of conventions for applying rotations in 3D modelling. More on those later in this section.

To help in visualizing orientation this asymmetric mesh is used in examples

![The Pilot](/img/how_to/Mesh/pilot.jpg)

The most straight forward method to change the orientation of a mesh is the rotation property.

```javascript
 mesh.rotation = new BABYLON.Vector3(alpha, beta, gamma);
``` 
or

```javascript
mesh.rotation.x  =  alpha; //rotation around x axis
mesh.rotation.y  =  beta;  //rotation around y axis
mesh.rotation.z  =  gamma; //rotation around z axis
```
where alpha, beta, and gamma are angles measured in radians are known as the **Euler angles**.

Four questions need an immediate answer

1. Where is the center of rotation?
2. Are they applied in a clockwise or counter clockwise direction?
3. What is the frame of reference?
4. In which order are they applied?


The first two are easy to answer since, on creation, the center of rotation is the local origin of the mesh and rotations are always counter clockwise when looking in the positive direction of the stated axis.

The answer to 4 depends on 3 and in Babylon.js the rotation frame of reference is in the local space of the mesh being rotated.
It makes no difference which one of the following four sets of code you use the resulting orientation will always be the same.  

```javascript
mesh.rotation = new BABYLON.Vector3(alpha, beta, gamma);

mesh.rotation.x  =  alpha;
mesh.rotation.y  =  beta;
mesh.rotation.z  =  gamma;

mesh.rotation.z  =  gamma;
mesh.rotation.x  =  alpha;
mesh.rotation.y  =  beta;

mesh.rotation.y  =  beta;
mesh.rotation.z  =  gamma;
mesh.rotation.x  =  alpha;
```
The order is - a rotation of beta about the local y axis, then alpha about the local x axis and finally a rotation of gamma about the local z axis.

The following sequence of images shows this order of rotation.  
Red x axis, green y axis, blue z axis.

![Local Rotation](/img/getstarted/rotateorder.png)

From 0 rotation rotate &pi;/2 about y, then &pi;/2 about x, then &pi;/2 about z.

However sometimes you want to rotate around axes other than the x, y and z axes in local space and set a sequence of rotations of your own order.

## Transformations
## Rotation Conventions

There are several methods of achieving rotations within Babylon.js all of which use a particular convention.


## Euler Angles

In 3D space Euler angles can produce any possible orientation by providing three angles to rotate about each of three axes in a given order. 

For three axes X, Y and Z there are 12 different permutations for the order of the angles. Since X, Y and Z can be in *World Space* or in *Local Space* this means there is a potential of 24 different possibilities. Most, if not all,of these are in use in different systems around the world. So you need to be very careful that you know very clearly the convention that the system you are working in uses.

Mesh.rotation(alpha, beta, gamma) uses the three Euler angles alpha, beta and gamma which are rotations about the X, Y and Z axes respectively. The convention that Babylon.js uses is based on the yaw, pitch and roll convention and so is carried out around X, Y and Z in local space in the order Y, X, Z.

References to Euler angles within the Babylon.js community can usually be taken to mean the angles to use with the _rotation_ method.

### YXZ *Local Axes* Yaw, Pitch, Roll

![Yaw pitch roll](/img/how_to/Mesh/yawpitchroll.jpg)

A pitch is about X, yaw about Y and roll about Z applied in the order yaw, pitch roll using **local** axes.

Applying independent rotations to a newly created mesh (ie one that has zero rotations) in the order YXZ using local axes

```javascript
mesh.rotate(BABYLON.Axis.Y, yaw, BABYLON.Space.LOCAL);
mesh.rotate(BABYLON.Axis.X, pitch, BABYLON.Space.LOCAL);
mesh.rotate(BABYLON.Axis.Z, roll, BABYLON.Space.LOCAL);
```

produces the same orientation as 

```javascript
mesh.rotation = new BABYLON.Vector3(pitch, yaw, roll);
```

which will produce this orientation whatever the orientation of the mesh prior to its application. The playground below demonstrates this by randomly generating angles and then applying these two methods to two different boxes which remain in alignment.

<Playground id="#1ST43U#50" title="YXZ Yaw, Pitch, Roll" description="Simple example of YXZ Yaw, Pitch, Roll."/>

### ZXY *World Axes*

The YXZ convention with local axes has produced a particular orientation and it turns out that taking the same angles (alpha = pitch, beta = yaw and gamma = roll) and applying them in the order ZXY in world space will produce exactly the same orientation.

Applying independent rotations to a newly created mesh (ie one that has zero rotations) in the order ZXY

```javascript
mesh.rotate(BABYLON.Axis.Z, gamma, BABYLON.Space.WORLD);
mesh.rotate(BABYLON.Axis.X, alpha, BABYLON.Space.WORLD);
mesh.rotate(BABYLON.Axis.Y, beta, BABYLON.Space.WORLD);
```

produces the same orientation as 

```javascript
mesh.rotation = new BABYLON.Vector(alpha, beta, gamma);
```

which will produce this orientation whatever the orientation of the mesh prior to its application. The playground below demonstrates this by randomly generating angles and then applying these two methods to two different boxes which remain in alignment.

<Playground id="#1ST43U#52" title="ZXY Example" description="Simple example of ZXY rotation."/>



## Euler Angles to Quaternions

### YXZ, Local Space, Yaw, Pitch, Roll

![Yaw pitch roll](/img/how_to/Mesh/yawpitchroll.jpg)

As a reminder this convention is directly used in the _rotation_ method in Babylon.js in the form

```javascript
mesh.rotation = new BABYLON.Vector3(pitch, yaw, roll);
```

In this convention to take the three angles, yaw, pitch and roll and rotate rotate yaw about Y, then pitch about X and roll about Z using the **local** axes.

```javascript
mesh.rotate(BABYLON.Axis.Y, yaw, BABYLON.Space.LOCAL);
mesh.rotate(BABYLON.Axis.X, pitch, BABYLON.Space.LOCAL);
mesh.rotate(BABYLON.Axis.Z, roll, BABYLON.Space.LOCAL);
```

which with quaternions is the same as using _RotationYawPitchRoll_

```javascript
const yprQuaternion = BABYLON.Quaternion.RotationYawPitchRoll(yaw, pitch, roll);
``` 
Applying the above _rotate_ sequence to a newly created mesh (ie one that has zero rotations) in the order YXZ in **local** space and applying _RotationAlphaBetaGamma_ to a mesh, with any orientation, using the same angles will produce the same orientation. The playground below demonstrates this by randomly generating angles and then applying these two methods to two different boxes which remain in alignment.

<Playground id="#1ST43U#54" title="Yaw Pitch Roll to Quaternion" description="Simple example of converting yaw, pitch, and roll to quaternion."/>

### ZXZ, World Space, A Standard Convention 

A standard Euler angle convention is to take three given angles alpha, beta and gamma and rotate alpha about Z, then beta about X, then gamma about Z using the **world** axes. In Babylon.js this can be achieved by using _rotate_

```javascript
mesh.rotate(BABYLON.Axis.Z, alpha, BABYLON.Space.WORLD);
mesh.rotate(BABYLON.Axis.X, beta, BABYLON.Space.WORLD);
mesh.rotate(BABYLON.Axis.Z, gamma, BABYLON.Space.WORLD);
```

which with quaternions is the same as using _RotationAlphaBetaGamma_

```javascript
var abcQuaternion = BABYLON.Quaternion.RotationAlphaBetaGamma(alpha, beta, gamma);
```

Applying the above _rotate_ sequence to a newly created mesh (ie one that has zero rotations) in the order ZXZ in **world** space and applying _RotationAlphaBetaGamma_ to a mesh, with any orientation, using the same angles will produce the same orientation. The playground below demonstrates this by randomly generating angles and then applying these two methods to two different boxes which remain in alignment.

<Playground id="#1ST43U#53" title="ZXZ To Quaternion" description="Simple example of converting ZXZ to quaternion."/>


So far we have considered one mesh operating in its local space and the world space of Babylon.js. What if we want one mesh to operate in the frame of reference of another mesh. Before we consider parenting, in the next section, we will look at ways this can be done using the data that Babylon.js directly stores on the transformation of a mesh and its coordinates.

## 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](/divingDeeper/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."/>

## 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*.

## Examples of Coordinate Transformation

## Satellite

Take a box that is rotating and translating from the top of which emerges a smaller box and travels in a direction always perpendicular to the top face of the box. 

In the local coordinate system of the box the up direction is (0, 1, 0) and so locally the position of anything travelling in that direction will be (0, y, 0).

Knowing the world matrix of the box, for any frame, it can then be applied to the vector (0, y, 0) position of the smaller box to determine the world position of the smaller box for that frame.

Obtaining the world matrix for the box inside a _registerAfterRender_ loop means that the world matrix will already have been obtained for the box and you can get it directly.

To match the orientation of the smaller box to the box whatever rotation has been applied to the box has to be re-applied to the smaller box. The easiest way to do this is to re-use the _rotate_methods applied to the box to the small box.

The following code gives the animation.

```javascript
 scene.registerAfterRender(function () {
 box.rotate(BABYLON.Axis.Y, Math.PI / 150, BABYLON.Space.LOCAL);
 box.rotate(BABYLON.Axis.X, Math.PI / 200, BABYLON.Space.LOCAL);
 box.translate(new BABYLON.Vector3(-1, -1, -1).normalize(), 0.001, BABYLON.Space.WORLD)
 small.rotationQuaternion = box.rotationQuaternion;
 matrix = box.getWorldMatrix();
 y += 0.001;
 local_pos = new BABYLON.Vector3(0, y, 0);
 small.position = BABYLON.Vector3.TransformCoordinates(local_pos, matrix);

 })
```

Small box travels from Large Box: <Playground id="#TRAIXW#2" title="Small Box Travels From Large Box" description="Simple example of a small box traveling from a large box."/>

## Disc World

Imagine a disc flying around space with building on it. In fact the following example uses a thin cylinder as the disc since the top circular face is horizontal whilst the face of a disc in Babylon.js is vertical. (OK it does make any real difference but it more natural to start with a horizontal ground).

The building will be an array of boxes. Leaving the boxes as separate meshes would mean applying the _TransformCoordinates_ function to each of them, so instead they will be merged into one mesh. As in the example above the rotation of the disc and the boxes are matched and the coordinate position of the boxes transformed.

```javascript
 var phi = 0;
 scene.registerAfterRender(function () {
 matrix = disc.getWorldMatrix();
 disc.rotate(BABYLON.Axis.Y, Math.PI / 150, BABYLON.Space.LOCAL);
 disc.rotate(BABYLON.Axis.Z, Math.PI / 200, BABYLON.Space.LOCAL);
 disc.position = new BABYLON.Vector3(15 * Math.cos(phi), 16 * Math.sin(phi), 5)
 boxes.rotationQuaternion = disc.rotationQuaternion;
 boxes.position = BABYLON.Vector3.TransformCoordinates(boxes_position, matrix);
 phi +=0.01;

 });
```
Disc World: <Playground id="#TRAIXW#5" title="Disc World" description="Simple example of a disc world with coordinate transformation."/>

One final step before considering using patents and pivots as a way of changing the center of transformation of a mesh is the more drastic step of changing the vertex data describing the mesh itself by baking a transformation into a mesh.


## Transformations
Transformations are the actions that change an object's position, rotation and scale. Although this section largely covers transformations applied to meshes some can also apply to other Babylon.js objects.

Applying transformations can seem straightforward and in many cases they are, such as changing position. Others aspects may appear easy but in practice can be difficult either in concept, execution or both. In 3D something as simple as a rotation can prove tricky, once you have rotated a mesh about x and y then its z axis may not be where you think it should be since a mesh's local frame of reference rotates with it.

Frames of reference, in 3D, are formed by an origin and three mutually perpendicular axes through the origin. When created in Babylon.js objects are placed using a frame of reference in **World Space** where there are two horizontal axes, x and z, and a vertical y axis in a left handed system.

Each mesh also has its own **Local Space**.  Meshes built within Babylon.js are created with their local space origin at the world space origin and with their local space axes x, y and z aligned with the x, y and z axes of the world space. The local origin acts as the center of transformation unless pivots or parents are added to the mesh. Both of these cases will be described.

Meshes created in other packages and imported may use different frames of reference.




Centered on Created Origin

Transformations About the Local Origin

Coming next

Position A Mesh

Learn about positioning meshes in Babylon.js.

Mesh Rotation

Learn how to properly rotate a mesh in Babylon.js.

Sequencing Rotations

Learn how to sequence rotations in Babylon.js.

Rotation Quaternions

Learn about rotation quaternions in Babylon.js.

Target Axes Alignment

Learn about target axes alignment in Babylon.js.

Rotation Conventions

Learn about rotation conventions in Babylon.js.

Introduction To Coordinate Transformation

Learn all about coordinate transformation in Babylon.js.

Coordinate Transformation Examples

Check out coordinate transformation examples in Babylon.js.

Baking Transformations

Learn about how to bake transformations in Babylon.js.