babylon101

Position and Rotation


Position, Rotation and Scaling

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 The Pilot

Frames of Reference

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 setting a pivot point they can be changed to that point.

Vectors

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

The Pilot

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.

Creation of Pilot

Position

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.

pilot position

Playground Example for Position -


Rotation

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.

Convention 1 - Local Axes

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.

start Y X Z

The smaller axes represent the direction of the world axes.

Convention 2 - 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.

start Y X Z

Playground Example - Rotation -


Summary

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;

Playground Example - Positioned, Scaled, and Rotated Boxes

Sequencing Rotations

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.

start X Y Z

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

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.

scaled

Next step

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.

Further Reading

Rotate and Translate Overview