
## 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 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 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.  
<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 tranformation.  
<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."/>

Camera position moved relative to center of transformation just 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 will allow you to move camera position (reminder to click on canvas area before using 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 rotating in orbit around a target and move it with 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 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

```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 method to using a Babylon.js [pivot](/divingDeeper/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 a center of transformation you apply the rotation or scaling vectors to the parent. This is different to using a Babylon.js pivot to rotate or scale a mesh.

Making mesh P a parent of mesh C, the child mesh, changes the frame of reference for mesh C to the local axes of mesh P. Re-positioning, rotating or scaling mesh P will apply the same transformations to mesh C. 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 none uniform scaling e.g. the scale values on every axes are not the same is not supported on parent nodes. Indeed, the decomposition of such Matrix would result in supporting shear at the transform level which has not been added for performance concerns.

To parent mesh C to mesh P you use any of these three methods

```javascript
meshC.parent = meshP; //1
meshC.setParent(meshP); //2
meshP.addChild(meshC); //3
```

The order you set transformations, such as position or rotation, to the parent mesh will affect the result using methods 2 and 3 above.

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 you use any of

```javascript
meshC.parent = null;
meshC.setParent(null);
meshP.removeChild(meshC);
```

The following playground shows that setting a child's parent mesh P, directly to null, `meshC.parent = null`, not only removes the parent from the child, mesh C (red), but also removes from mesh C any transformation applied via mesh P leaving only the transformations applied directly to mesh C. Using this method, on the removal of the parent, the position, rotation and scale of mesh C will be seen as changed in the scene view. The other two methods, `meshC.setParent(null)` and `meshP.removeChild(meshC)`, just removes the link to the parent and any transformation to mesh C applied via mesh P up to the point of removal will remain. Using these methods, on the removal of the parent, the position, rotation and scale of mesh C will be seen as as the same in the scene view.

<Playground id="#XQI4UY#19" title="Removing a Parent" description="Simple example of removing a parent."/>

## How To Use a Parent

The parent method for these examples can be directly compared to [transforming coordinates](/divingDeeper/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 around space with building on it. In fact the following example uses a thin cylinder as the disc since the top circular face is horizontal whilst the face of a disc in Babylon.js is vertical. (OK it does make any real difference but it 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 values for the scaling, some axis might change sign. When computing child local transform, all axis are assumed to be positive. This is the default behavior for legacy reason. It's however possible to keep the scaling axis sign. When calling `addChild` and `removeChild`, a second optional boolean parameter will keep sign when set to true. Both function recompute scaling value. So, set parameter to true when add or removing child.



## Transformation, Pivots and Parents

Should you wish to rotate or scale a mesh, or other object, about a point other than its own _local origin_ then this can be done by changing its center of transformation using either a parent or a pivot. Whilst in general conversation, and 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 the behavior of a pivot point as described for example by 3DS Max or Maya then set a parent on the mesh to act as the pivot point rather than using _setPivotPoint_.

When a parent is set on a child mesh, transforming a parent will apply the same transformations to the child. Translations, rotations and scaling of the child will take place relative to the _local origin_ of the child. Setting the position of the child will be 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 any transformations made to the parent prior to assigning it  children may also be applied to the children when the parent is assigned. It usually makes sense not to rotate or move a child until after you've assigned it to the parent.

When a pivot is set on a mesh, re-positioning the mesh will re-position 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.