How To

Use a TransformNode

A TransformNode

A TransformNode is an object that is not rendered but can be used as a center of transformation. This can decrease memory usage and increase rendering speed compared to using an empty mesh as a parent and is less complicated than using a pivot matrix.

The TransformNode can be used as a center of transformation (CoT) for a mesh and some lights and cameras by acting as a parent to them increasing versitility.

Remember that, as with any parent, transformations are relative to the frame of reference of the parent. In all of the following Playgrounds the purple sphere is created only to show the TransformNode position.

As a Center of Rotation

Set a TransformNode as a parent then rotate the TransformNode.


//create a Center of Transformation
var CoT = new BABYLON.TransformNode("root"); 
box.parent = CoT;  //apply to Box


The light blue cylinder is an additional stationary object to show that the camera is moving.

For those examples stating a dummy camera a black sphere is used to show the intended path of the camera in the Playground that follows it. The purple ray shows the direction of view of the camera and the tube an indication of the view covered by the camera.

Arc Rotate Camera

The center of transformation is placed at the target position of the arc rotation camera.

Target position moved by moving center of tranformation.

Camera position moved relative to center of transformation just changes the distance between the camera and target.

Universal Camera

The arrow keys will allow you to move camera position (reminder to click on canvas area before using keys).

You can also have a universal camera rotating in orbit around a target and move it with keys.


Those lights that have a position can use a TransformNode.

Point Light

Spot Light

As a Center of Translation or Position

When you move a center of transformation anything that is parented to it will move with it.

When you transform an object with a center of transformation as parent then that transformation takes place relative to the frame of reference of the center of transformation.

In the example below you can see that the simple movement given by

box.position.x += 0.01

takes place along the rotating x axis of the center of transformation.

Moving cameras and lights work in the same way.

As a Center of Enlargement

Obviously scaling has no effect on lights or cameras. Scaling takes place relative to the frame of reference of the center of enlargement.

Further Reading

More Advanced - L3

How To Rotate Around an Axis about a Point