# Transform Node

> Learn about the transform node in Babylon.js.

Source: https://doc.babylonjs.com/features/featuresDeepDive/mesh/transforms/parent_pivot/transform_node

## 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 it 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, which increases its versatility.

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.

## Mesh

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

- [Playground: Center of Transform At Box Center](https://playground.babylonjs.com/#2JKA91) - Simple example of the center of transform at a box center.
- [Playground: Center of Transform Offset](https://playground.babylonjs.com/#2JKA91#1) - Simple example of a center of transform offset.
- [Playground: Box Rotating about its Local Axes](https://playground.babylonjs.com/#2JKA91#2) - Simple example of a box rotating about its local axes.

### Camera

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

For those examples that mention 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 camera's viewing direction, and the tube indicates the area covered by the camera's view.

### Arc Rotate Camera

The center of transformation is placed at the target position of the arc rotation camera.  
- [Playground: Rotating Dummy Camera](https://playground.babylonjs.com/#PP962K#1) - Simple example of a rotating dummy camera.
- [Playground: Rotating Arc Camera](https://playground.babylonjs.com/#2JKA91#4) - Simple example of a rotating arc camera.

Target position moved by moving center of transformation.  
- [Playground: Rotating Dummy Camera](https://playground.babylonjs.com/#PP962K#2) - Simple example of a rotating dummy camera.
- [Playground: Rotating Arc Camera](https://playground.babylonjs.com/#2JKA91#5) - Simple example of a rotating arc camera.

Moving the camera position relative to the center of transformation simply changes the distance between the camera and target.  
- [Playground: Rotating Dummy Camera](https://playground.babylonjs.com/#PP962K#3) - Simple example of a rotating dummy camera.
- [Playground: Rotating Arc Camera](https://playground.babylonjs.com/#2JKA91#6) - Simple example of a rotating arc camera.

### Universal Camera

The arrow keys allow you to move the camera position (remember to click on the canvas area before using the keys).  
- [Playground: Rotating Universal Camera 1](https://playground.babylonjs.com/#2JKA91#8) - Simple example of a rotating universal camera.

You can also have a universal camera rotate in orbit around a target and move it with the keys.  
- [Playground: Rotating Universal Camera 2](https://playground.babylonjs.com/#2JKA91#9) - Simple example of a rotating universal camera.

## Lights

Those lights that have a position can use a TransformNode.

### Point Light

- [Playground: Rotating Point Light](https://playground.babylonjs.com/#2JKA91#10) - Simple example of a rotating point light.

# Spot Light

- [Playground: Rotating Spot Light](https://playground.babylonjs.com/#2JKA91#11) - Simple example of a rotating spot light.

## As a Center of Translation or Position

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

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

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

```javascript
box.position.x += 0.01;
```

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

- [Playground: Box Translation](https://playground.babylonjs.com/#2JKA91#12) - Simple example of a box translation.

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.

- [Playground: Box Scaling](https://playground.babylonjs.com/#2JKA91#13) - Simple example of box scaling.

## Further reading

- [How To Rotate Around an Axis about a Point](https://doc.babylonjs.com/features/featuresDeepDive/mesh/transforms/parent_pivot/pivot)