Table of contents

There are two frames of reference that BabylonJS uses with a mesh, the **world axes** and the **local axes**.
In all diagrams and playgrounds X axis is red, Y axis is Green and Z axis is blue.
In all examples a non symmetrical mesh, the pilot, will be used.

The Pilot

When the pilot is created its position and rotation are both set to (0, 0, 0), its scaling to (1, 1, 1) and all frames of reference coincide.

Position places the pilot with reference to the **word axes** using a vector (x, y, z). The **local axes** move with the pilot.

```
pilot.position = new BABYLON.Vector3(2, 3, 4);
```

or individual components

```
pilot.position.x = 2;
pilot.position.y = 3;
pilot.position.z = 4;
```

The local and world axes remain in the same orientation.

Playground Example for Position -

WARNING Rotating in 3D space is always tricky. The order in which rotations are applied to a shape changes the final orientation of the shape and there are many varying conventions for applying rotations. For more details on these conventions in Babylon JS see Applying Rotations Convention BJS

In BabylonJS

Rotations are set using

```
pilot.rotation = new BABYLON.Vector3(alpha, beta, gamma);
```

or

```
pilot.rotation.x = alpha;
pilot.rotation.y = beta;
pilot.rotation.z = gamma;
```

**with the following conventions**

All rotations are in radians and are anticlockwise when looking in the direction of the positive axes.

Rotation turns about the centre of rotation at the origin of the **local axes** and rotation with reference axes parallel to the **world axes** using a vector ( alpha, beta, gamma) or individual components.
Where alpha is the rotation about the x axis, beta about the y axis and gamma about the z axis.

Rotations are always applied in the order z, x, y whether set as a single vector or individually.

The following all produce the same orientation

```
pilot.rotation = new BABYLON.Vector3(alpha, beta, gamma);
pilot.rotation.x = alpha;
pilot.rotation.y = beta;
pilot.rotation.z = gamma;
pilot.rotation.z = gamma;
pilot.rotation.x = alpha;
pilot.rotation.y = beta;
pilot.rotation.y = beta;
pilot.rotation.z = gamma;
pilot.rotation.x = alpha;
```

The following diagrams show that applying a rotation of PI/2 in the axis order, z, x, y or y, x, z give the same result.

This consistency of order z, x, y can be further checked out in the following playground by re-ordering and/or commenting out lines 38, 39 and 40

Playground Example for Rotation -

The aim is to produce an animation of a disc rotating along a straight horizontal path. When a disc of radius r rotates through an angle theta the disc travels a distance of r * theta. For the animation this means a series of positions a distance r * theta apart. These positions are used as the points with which to create the line.

Playground Example Rotation Along Straight Horizontal Path -

Rotate about Axis

Rotate a Mesh

Applying Rotations Convention BJS