Table of contents

In mathematics a translation is a vector displacement of an object from its current position to a new position. A rotation turns an object
through an angle about an axis, which is a fixed line. When using rotate on a mesh the axis passes through the *local origin* of the mesh.

Unlike mesh.rotation using mesh.rotate adds new angles of roation to previous ones.

View the two playgrounds below to see a translation and a rotation, using rotate, in progress.

Playground Example - Translate -

Playground Example - Rotate -

There are two frames of reference one the **world axes** in *world space* and the other the **local axes** in *local space*.
When a mesh is created the **world axes** and the **local axes** coincide. As a mesh is translated or rotated the **local axes** move with it.
The frame of reference used depends whether translate and rotate take place on the *world space* or the *local space*.

The **world space** is set using BABYLON.Space.WORLD

The **local space** is set using BABYLON.Space.LOCAL

To translate a mesh a direction, distance and space need to be specified.

```
pilot.translate(BABYLON.Axis.Y, 2, BABYLON.Space.WORLD);
pilot.translate(new BABYLON.Vector3(-1, 3, -2), 3, BABYLON.Space.LOCAL);
```

To rotate a mesh an axis, angle and the space specified are needed. The axis is given as any vector(x, y, z) and this is taken as the line passing through the origin of the local axes. In other words the mesh spins at its current position. For convenience unit vectors in the positive directions of the x, y and z axes are pre-defined as the constants BABYLON.Axis.X, BABYLON.Axis.Y and BABYLON.Axis.Z respectively.

```
pilot.rotate(BABYLON.Axis.Y, Math.PI / 2, BABYLON.Space.WORLD);
pilot.rotate(new BABYLON.Vector3(-1, 3, -10), 7 * Math.PI / 12, BABYLON.Space.LOCAL);
```

Should you wish to rotate a mesh about a pivot that is not the *local origin* of the mesh then there are method to do so. See the links in further reading.

From BabylonJS version 2.6 there is a new property that also allows the accumulation of rotations but only about **local axes**, this is mesh.addRotation(x, y, z).
Only one of x, y or z should be non zero

```
mesh.addRotation(Math.PI/2, 0, 0).addRotation(0, Math.PI/4, 0).addRotation(0, Math.PI/6, 0)
```

Whatever the current rotation of the mesh this will rotate it further first around the *local X axis*, followed by a rotation around the *local Y axis* followed by
a rotation around the *local Z axis*.

In the following playground the sequence of boxes shows the result of applying a rotation around the *local Z axis*, followed by a rotation around the *local Y axis* followed by
a rotation around the *local X axis*.

Playground Example - Addition of Rotations -

Playground Example - Wheels -

Author Jerome Bousquie

When animating with translate and rotate use scene.register**After**Render rather than scene.register**Before**Render

Using Pivots

Rotate About a Pivot Other than the Local Origin

Translate and Rotate in Detail