
## 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 id="#2JKA91" title="Center of Transform At Box Center" description="Simple example of the center of transform at a box center."/>
<Playground id="#2JKA91#1" title="Center of Transform Offset" description="Simple example of a center of transform offset."/>
<Playground id="#2JKA91#2" title="Box Rotating about its Local Axes" description="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 id="#PP962K#1" title="Rotating Dummy Camera" description="Simple example of a rotating dummy camera."/>
<Playground id="#2JKA91#4" title="Rotating Arc Camera" description="Simple example of a rotating arc camera."/>

Target position moved by moving center of transformation.  
<Playground id="#PP962K#2" title="Rotating Dummy Camera" description="Simple example of a rotating dummy camera."/>
<Playground id="#2JKA91#5" title="Rotating Arc Camera" description="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 id="#PP962K#3" title="Rotating Dummy Camera" description="Simple example of a rotating dummy camera."/>
<Playground id="#2JKA91#6" title="Rotating Arc Camera" description="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 id="#2JKA91#8" title="Rotating Universal Camera 1" description="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 id="#2JKA91#9" title="Rotating Universal Camera 2" description="Simple example of a rotating universal camera."/>

## Lights

Those lights that have a position can use a TransformNode.

### Point Light

<Playground id="#2JKA91#10" title="Rotating Point Light" description="Simple example of a rotating point light."/>

# Spot Light

<Playground id="#2JKA91#11" title="Rotating Spot Light" description="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 id="#2JKA91#12" title="Box Translation" description="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 id="#2JKA91#13" title="Box Scaling" description="Simple example of box scaling."/>



## Overview of a Parent

Using a parent is an alternative to using a Babylon.js [pivot](/features/featuresDeepDive/mesh/transforms/parent_pivot/pivots) to set the center of transformation for a mesh; that is, the point used as the center of rotation or the center of enlargement. To rotate or scale a mesh using a parent as the center of transformation, you apply the rotation or scaling vectors to the parent. This differs from using a Babylon.js pivot to rotate or scale a mesh.

Making mesh P a parent of mesh C changes the frame of reference for mesh C to the local axes of mesh P. Repositioning, rotating, or scaling mesh P will apply the same transformations to mesh C. The positioning, rotation, and scaling of mesh C will depend on the position and orientation of the local axes of C relative to those of P.

Please note that non-uniform scaling (scaling with different values on different axes) is not supported on parent nodes. Indeed, decomposition of such a Matrix would result in supporting [shear mapping](https://en.wikipedia.org/wiki/Shear_mapping) at the transform level. That has not been added out of concern for performance.

To parent mesh C to mesh P, you can use any of these three methods:

```javascript
meshC.parent = meshP; // 1
meshC.setParent(meshP); // 2
meshP.addChild(meshC); // 3
```

... however, the resulting behavior will not always match perfectly. Specifically, the order in which you set position and apply rotation to the parent mesh will affect the result if method 2 or 3 was used, but not if method 1 was used.

The following playgrounds show the different behaviors:

<Playground id="#NRNBMM" title="Transform C and P After Parenting" description="Simple example of transforming C and P after parenting."/>
<Playground id="#NRNBMM#1" title="Transform C Before and P After Parenting" description="Simple example of transforming C before and P after parenting."/>
<Playground id="#NRNBMM#2" title="Transform P Before and C After Parenting" description="Simple example of transforming P before and C after parenting."/>
<Playground id="#NRNBMM#3" title="Transform C and P Before Parenting" description="Simple example of transforming C and P before parenting."/>

To remove a child (mesh C) from a parent (mesh P), use any of these methods:

```javascript
meshC.parent = null; // 1
meshC.setParent(null); // 2
meshP.removeChild(meshC); // 3
```

The following playground demonstrates how using method #1 does not _just_ remove the parent from the child (mesh C, red in color), but _also_ removes from the child any transformations applied via the parent and leaves only the transformations applied directly to the child mesh. The moment when the parent is removed from mesh C using method #1, position, rotation and scale of mesh C will visibly change in the scene view. Methods #2 and #3 do remove the parent-child relationship, but any transformations to mesh C applied via mesh P up to the point of removal will remain. Position, rotation and scale of mesh C will never visibly change when its parent is removed using method #2 or #3.

<Playground id="#XQI4UY#19" title="Removing a Parent" description="Simple example of removing a parent."/>

## How To Use a Parent

The parent method used in these examples can be compared directly with [transforming coordinates](/features/featuresDeepDive/mesh/transforms/center_origin/transform_coords).

## Satellite

Take a box that is rotating and translating from the top of which emerges a smaller box and travels in a direction always perpendicular to the top face of the box.

By parenting the smaller box to the box rotations, positions and scaling given to the parent are also applied to the child. Rotations, positions and scaling given to the child take place inside the frame of reference of the parent.

The following code gives the animation.

```javascript
scene.registerAfterRender(function () {
    box.rotate(BABYLON.Axis.Y, Math.PI / 150, BABYLON.Space.LOCAL);
    box.rotate(BABYLON.Axis.X, Math.PI / 200, BABYLON.Space.LOCAL);
    box.translate(new BABYLON.Vector3(-1, -1, -1).normalize(), 0.001, BABYLON.Space.WORLD);
    y += 0.001;
    small.translate(BABYLON.Axis.Y, 0.001, BABYLON.Space.LOCAL);
});
```

<Playground id="#XQI4UY#1" title="Animation Parent" description="Simple example of an animation parent."/>

## Disc World

Imagine a disc flying through space with buildings on it. In fact, the following example uses a thin cylinder as the disc, since the top circular face is horizontal, whereas the face of a disc in Babylon.js is vertical. (OK, it does not make any real difference, but it is more natural to start with a horizontal ground.)

The building will be an array of boxes with each box parented to the disc.

```javascript
var phi = 0;
scene.registerAfterRender(function () {
    matrix = disc.getWorldMatrix();
    disc.rotate(BABYLON.Axis.Y, Math.PI / 150, BABYLON.Space.LOCAL);
    disc.rotate(BABYLON.Axis.Z, Math.PI / 200, BABYLON.Space.LOCAL);
    disc.position = new BABYLON.Vector3(15 * Math.cos(phi), 16 * Math.sin(phi), 5);
    phi += 0.01;
});
```

<Playground id="#XQI4UY#3" title="Disc World" description="Simple example of parenting in the disc world."/>

## Negative scaling and local transformation

When parenting a node with negative scaling values, some axes might change sign. When computing the child's local transform, all axes are assumed to be positive. This is the default behavior for legacy reasons. However, it is possible to keep the scaling axis sign. When calling `addChild` and `removeChild`, a second optional boolean parameter will preserve the sign when set to true. Both functions recompute the scaling value, so set the parameter to true when adding or removing a child.



## Transformation, Pivots and Parents

If you want to rotate or scale a mesh, or another object, about a point other than its own _local origin_, you can do so by changing its center of transformation using either a parent or a pivot. Although in general conversation, and in some 3D applications, a center of transformation may be referred to as a pivot point, in Babylon.js the term _pivot_ is used when setting a center of transformation with a specific method. The effects of using a parent or a pivot are different. To obtain behavior similar to the pivot point behavior described in applications such as 3DS Max or Maya, set [`mesh.parent`](/typedoc/classes/babylon.node#parent) to act as the pivot point rather than using [`setPivotPoint`](/typedoc/classes/babylon.transformnode#setPivotPoint).

When the `parent` property is set on a mesh, transforming the parent applies the same transformations to the child. [Translations](/typedoc/classes/babylon.transformnode#translate), rotations, and scaling of the child take place relative to the _local origin_ of the child. Setting the position of the child is relative to the _local origin_ of the parent. In simpler terms, moving the child will not move the parent, and moving the parent will move the child.

Depending on the [method used to produce the parent-child relationship](/features/featuresDeepDive/mesh/transforms/parent_pivot/parent), some transformations made to the parent prior to the moment of forming the relationship may also be applied to the children at or after that moment. It usually makes sense not to rotate or move a child before assigning its parent.

When a pivot is set on a mesh, repositioning the mesh will reposition the pivot so that its placement relative to the mesh is not changed. Rotation and scaling of the mesh take place relative to the pivot. More simply, moving the mesh will move the pivot and moving the pivot will not move the mesh.

Using a pivot can be tricky, and a number of methods are available. Some of these methods, but not all, may actually change the _local origin_ of a mesh.


Transform Node

A TransformNode

As a Center of Rotation

Mesh

Camera

Arc Rotate Camera

Universal Camera

Lights

Point Light

As a Center of Translation or Position

As a Center of Enlargement

Further reading

Rotating Around Axis

Learn how to rotate around an axis in Babylon.js.