How To

Rotate Around an Axis About a Point - Legacy


Page for v3.2+

How To Rotate Around an Axis About a Point

Rotation needs two things specifying, they are an axis and a center of rotation with the axis passing through the center of rotation. An axis is defined by a direction vector and the center of rotation a position vector. In Babylon.js when a mesh is created the center of rotation defaults to the the local origin of the mesh which is the mesh's position. Using rotation the axis is specified through the Euler angles alpha, beta, gamma, and using rotationQuaternion and rotate it is specified explicitly.

There are three ways to change a center of rotation different to the local origin, these are using a TransformNode, a parent and setting a pivot.

Together an axis and a center of rotation define a straight line in space and in the following animated playgrounds this line is shown in white. The asymmetric pilot mesh is used to demonstrate the rotation.

The Pilot The Pilot

In each of the following examples there is

  • a center of rotation at CoR_At;
  • a marker mesh for the center of rotation, a small sphere positioned at CoR_At;
  • an axis to rotate around
  • the pilot mesh at a starting position relative to the center of rotation, pilotStart.

How to Use TransformNode as a Center of Rotation

A TransformNode is an object that is not rendered but can be used as a center of rotation (in fact the centre of any transformation). This can decrease memory usage and increase rendering speed.

The TransformNode is used as a pivot point by parenting it to the pilot and rotating it.

var pivot = new BABYLON.TransformNode("root");
pivot.position = CoR_At;

pilot.parent = pivot;
pilot.position = pilotStart;

pivot.rotate(axis, angle, BABYLON.Space.WORLD);

In these playgrounds a sphere is created only to show the position of the TransformNode.

How To Use a Parent as Center of Rotation

The sphere is parented to the pilot, the pilot positioned and the sphere rotated.

sphere.position = CoR_At;

pilot.parent = sphere;
pilot.position = pilotStart;

sphere.rotate(axis, angle, BABYLON.Space.WORLD);

Note: Any movement of the sphere will result in the pilot being moved.

How To Use a Pivot as a Center of Rotation

BREAKING CHANGES IN THIS SECTION Technically in v3.2 and later setPivotMatrix applies a transformation matrix after setting the pivot whereas earler versions do not. It follows that when used with v3.2 or later the playgrounds in this section will not give the expected results. To obtain the expected results add false as a second parameter when using the setPivotMatrix method preventing the transformation matrix being applied.

As described in How to Set a Pivot set the pivot and the pilot in their wanted positions by placing the pilot where the pivot is going to be and setting the pivot translation using the displacement of the pilot position from the pivot position.

var CoR_At = new BABYLON.Vector3(1, 3, 2);
var pilotStart = new BABYLON.Vector3(3, 6, 6);

pilot.position = CoR_At; 

var pivotTranslate = pilotStart.subtract(CoR_At);
pilot.setPivotMatrix(BABYLON.Matrix.Translation(pivotTranslate.x, pivotTranslate.y, pivotTranslate.z));
/*-------------------Rotation Animation--------------------*/
var angle=0.025;   
scene.registerAfterRender(function() {
    pilot.rotate(axis, angle, BABYLON.Space.LOCAL);  

When looking at the next two playgrounds remember that the pivot has become the local origin for the pilot and setting the position of a mesh actually sets the local orign of the mesh. Hence moving the pivot for the pilot is done using pilot.position.

Notice that as the pivot is moved the axis line moves with the pivot, though the axis direction remains the same.

How to Use a Parent as a Pivot

Perhaps you would like to think about achieving the positioning of the pivot by changing the pivots position rather than the pilots position. This can be done with parenting as shown in the following example.

The sphere, representing the pivot at the center of rotation, is placed at the pivot position (CoR_At), the sphere is then made the parent of the pilot the pilot position relative to the pivot is set by matrix and the pilot rotated.

sphere.position = CoR_At;

pilot.parent = sphere;
pilot.setPivotMatrix(BABYLON.Matrix.Translation(pilotTranslate.x, pilotTranslate.y, pilotTranslate.z));

pilot.rotate(axis, angle, BABYLON.Space.WORLD);

Done this way any movement of the pivot is done by moving the parent mesh representing the pivot.

Further Reading

More Advanced - L3

Using a Pivot V3.2+
Using a Pivot before V3.2

How To Rotate Around an Axis about a Point V3.2+