Table of contents

The 101 course only considers the setting of a mesh's *position*, *rotation* and *scaling*. Further Reading will show you a range of methods to translate and rotate a mesh by a given amount.

Whatever the methods used they require a frame of reference, a means to describe the position, rotation or scaling and something to help visualize the effects of applying these. The visualization will be helped by the **Pilot** a constructed asymmetric shape.

The Pilot

There are two frames of reference that Babylon.js uses, the **world axes** and the **local axes**. The origin of the **world axes** never changes.

In all diagrams and playgrounds X axis is red, Y axis is Green and Z axis is blue.

When meshes are created their center is placed at the origin of the **word axes** and their position is always placed relative to the **word axes**.

The **local axes** move with the mesh. The origin of **local axes** is always at the created center of the mesh whatever its position. The centers of rotation and enlargement for a mesh are at the origin of the **local axes**, however by using either a TransformNode or a matrix to set a pivot point they can be changed to that point.

All positions, rotations and scaling are give as 3 dimensional vectors using *new BABYLON.Vector3(x, y, z)* and can be set separately.

Following its creation the pilot's position is at the world origin with rotation zero for all axes and its scaling is one, both **world axes** and the pilot's **local axes** 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.

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 you also need to know which frame of reference is being used. There are many varying conventions for applying rotations in 3D modelling. 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; //rotation around x axis
pilot.rotation.y = beta; //rotation around y axis
pilot.rotation.z = gamma; //rotation around z axis
```

where alpha, beta and gamma are angles measured in radians.

PAUSE FOR THOUGHT Immediately since three rotations are given about three different axes you need to ask - "in which order are they applied about which frames of reference and in which direction?"

Either of the following two conventions can be considered as being used by rotation in Babylon.js since both lead to the same outcome.

For **local axes** using *rotation* turns the mesh with the centre of rotation at the origin of the **local axes** in the axes order y, x, z about the **local axes**. All rotations are anticlockwise when looking in the direction of the positive axis.

The following sequence of images shows the initial starting position of the pilot followed by a rotation of π/2 about the local y axis, then π/2 about the local x axis and finally a rotation of π/2 about the local z axis.

The smaller axes represent the direction of the **world axes**.

Compared to convention 1 the center of rotation does not change but the axes of rotation do.

For **world axes** using *rotation* turns the mesh with the centre of rotation at the origin of the **local axes** in the axes order z, x, y about axes parallel to the **world axes**. All rotations are anticlockwise when looking in the direction of the positive axis.

The following sequence of images shows the initial starting position of the pilot followed by a rotation of π/2 about the world z axis, then π/2 about the world x axis and finally a rotation of π/2 about the world y axis.

For *rotation* whichever way you think about it the results are the same and the following all produce the same outcome

```
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 question now is what to do if you want a sequence of rotations that starts with one about the x axis, then about the y axis then about the z axis?

For **world axes** you use the rotate method) For rotations about **local axes** Babylon.js has both the *rotate* method and *addRotation* method.

You can chain a sequence of rotations using the *addRotation*. This method provides for one rotation value about one axis a series of which can be applied from the first to the last as the following example shows.

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

The following sequence of images shows the result of adding the individual rotations one after the other for the above playground, starting with the initial position of the pilot followed by a rotation of π/2 about the local x axis, then π/2 about the local y axis and finally a rotation of π/2 about the local z axis.

The smaller axes represent the direction of the **world axes**.

In general *mesh.addRotation(alpha, beta, gamma)* needs at least two of *alpha, beta, gamma* to be 0 where *alpha* is a rotation about the local x axis, *beta* about the local y axis and *gamma* about the local z axis.

Scaling along the x, y and z **local axes** is set using

```
mesh.scaling = new BABYLON.Vector3(scale_x, scale_y, scale_z);
```

or individually with

```
mesh.scaling.y = 5;
```

The following image shows a unit cube rotated about the z axis and scaled along the local y axis.

Now you know how to create and move objects in a scene, but all your meshes have the same 'skin'. Not for long, if you read our next tutorial about materials.