
## Overview of a Parent

Using a parent is an alternative method 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 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](/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 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.



## 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](/features/featuresDeepDive/mesh/transforms#rotation) the axis is specified through the Euler angles alpha, beta, gamma, and using [rotationQuaternion](/features/featuresDeepDive/mesh/transforms) and [rotate](/features/featuresDeepDive/mesh/transforms#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](/features/featuresDeepDive/mesh/transforms/parent_pivot/transform_node), a parent and [setting a pivot](/features/featuresDeepDive/mesh/transforms/parent_pivot/pivots).

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](/img/how_to/Mesh/pilot.jpg)
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.

```javascript
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.

<Playground id="#1JLGFP#36" title="Rotating TransformNode" description="Simple example of a Rotating TransformNode."/>
<Playground id="#C12LH3#3" title="Rotating Mesh Moving TransformNode along Axis" description="Simple example of a rotating mesh moving TransformNode along axis."/>
<Playground id="#C12LH3#4" title="Rotating Mesh Moving TransformNode" description="Simple example of a rotating mesh moving TransformNode."/>

## How To Use a Parent as Center of Rotation

The sphere is parented to the pilot, the pilot positioned and the sphere rotated.

```javascript
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.

<Playground id="#1JLGFP#31" title="Rotating Parent" description="Simple example of a rotating parent."/>

## How To Use a Pivot as a Center of Rotation

```javascript
var CoR_At = new BABYLON.Vector3(1, 3, 2);
var pilotStart = new BABYLON.Vector3(3, 6, 6);

pilot.position = pilotStart;

var pivotTranslate = pilotStart.subtract(CoR_At);
pilot.setPivotMatrix(BABYLON.Matrix.Translation(pivotTranslate.x, pivotTranslate.y, pivotTranslate.z));
```

```javascript
/*-------------------Rotation Animation--------------------*/
var angle = 0.025;
scene.registerAfterRender(function () {
    pilot.rotate(axis, angle, BABYLON.Space.LOCAL);
});
```

<Playground id="#C12LH3#7" title="Rotating Mesh with Pivot" description="Simple example of a rotating mesh with pivot."/>
<Playground id="#C12LH3#8" title="Rotating Mesh Moving Pivot along Axis" description="Simple example of a rotating mesh moving pivot along axis."/>

Notice that as the pivot is moved the axis line moves with the pivot, though the axis direction remains the same.  
<Playground id="#C12LH3#9" title="Rotating Mesh Moving Pivot" description="Simple example of a rotating mesh moving pivot."/>

## How to Use a Pivot as a Parent

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.

```javascript
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);
```

<Playground id="#1JLGFP#77" title="Rotating Mesh as Pivot's Child" description="Simple example of a rotating mesh as pivot's child."/>

Done this way any movement of the pivot is done by moving the parent mesh representing the pivot.  
<Playground id="#1JLGFP#78" title="Rotating Mesh Moving Pivot's Parent along Axis" description="Simple example of a rotating mesh moving pivot's parent along axis."/>
<Playground id="#1JLGFP#80" title="Rotating Mesh Moving Pivot's Parent" description="Simple example of a rotating mesh moving pivot's parent."/>



## A Pivot

A pivot in Babylon.js is an alternative method to using a [parent](/features/featuresDeepDive/mesh/transforms/parent_pivot/parent) to set the center of transformation for a mesh, that is the point used as the center of rotation or the center of enlargement. Using _setPivotPoint_ produces different behavior than setting a pivot point in tools such as 3DS Max and Maya and a parent should be used instead to produce a closer match to the behavior of these applications. 

On this page the demonstration mesh is a cube with side length 1. When a mesh is created the pivot (red sphere) is always at the _local origin_ (yellow sphere); the _local origin_ and _created origin_ are at the world space origin of (0, 0, 0). When the pivot and _local origin_ are coincident they are shown as a red and yellow striped sphere, as in Fig 1.

![Initial Creation of The Box](/img/how_to/pivots/pivot1.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 1 Cube with side length 2

To rotate or scale a mesh about a pivot point you apply the rotation or scaling vectors to the mesh. This is different to using a parent to rotate or scale a mesh.

The most straightforward way to set a pivot is to do it directly with the [_setPivotPoint_](/features/featuresDeepDive/mesh/transforms/parent_pivot/pivots#how-to-set-and-get-a-pivot-point) method. A pivot can also be set with a [translation matrix](/features/featuresDeepDive/mesh/transforms/parent_pivot/pivots#how-to-set-the-pivot-matrix).

## Set and Get a Pivot Point Directly

There are three useful functions to aid setting and getting a pivot point. These are

```javascript
mesh.setPivotPoint(Vector3);
mesh.getPivotPoint(); // returns Vector3
mesh.getAbsolutePivotPoint(); // returns Vector3
```

### Set Pivot Point

Using _setPivotPoint_ you simply pass a Vector3 object that is the **relative position** of the pivot to the _local origin_ of the mesh. To set a pivot at (x, y, z) relative to the _local origin_ of a mesh requires

```javascript
mesh.setPivotPoint(new BABYLON.Vector3(x, y, z));
```

For the cube of side 2 to set the pivot at the front, left, bottom corner use
```javascript
box.setPivotPoint(new BABYLON.Vector3(-1, -1, -1));
```

![Set pivot](/img/how_to/pivots/pivot9.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 2 Cube with side length 2 pivot at (-1, -1, -1)

<Playground id="#T6IN6X" title="Set Pivot Point Exp. 1" description="Setting a pivot point at front, left, bottom corner of a cube."/>
<Playground id="#T6IN6X#1" title="Set Pivot Point Exp. 2" description="Setting a pivot point at front, left, bottom corner of a displaced cube."/>

### Set Pivot Point To A World Space Position 
To set the pivot at a point given in **world space** it is necessary to find the relative position of this point to the mesh _local origin_. When there is a mesh at position (xc, yc, zc) you want to set a pivot at world space point (xp, yp, zp) then the relative position is (xp - xc, yp - yc, zp - z) and use

```javascript
mesh.setPivotPoint(BABYLON.Vector3(xp - xc, yp - yc, zp - z));
```

To set the pivot of the cube at world space point (1, 1, 1)
```javascript
const pivotAt = new BABYLON.Vector3(1, 1, 1);
const relativePosition = pivotAt.subtract(box.position)
box.setPivotPoint(relativePosition);
```
<Playground id="#T6IN6X#3" title="Set Pivot Point" description="Setting a pivot point in world space."/>

### Set Pivoted Mesh To A World Space Position
After a rotation or a scaling of a mesh with a pivot set the world space position of the mesh will not be the same as its position stored in _mesh.position_.

The blue sphere is at (5, 0, 0). When the yellow sphere(_local origin_) and the blue sphere coincide then a yellow and blue sphere is shown.

![positioned mesh](/img/how_to/pivots/pivot10.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 3 Pivoted Cube at (5, 0, 0)

![positioned and rotated mesh](/img/how_to/pivots/pivot11.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 4 Pivoted Cube Rotated

In Fig 3 and Fig 4 the value for ```box.position``` will be (5, 0, 0).   
However in Fig 4 the actual world space position of the _local origin_ is (-5.41421365737915, 0, -1). You can obtain the world space position using ```box.getAbsolutePosition()```.

In a similar way the _local origin_ of a pivoted mesh will be displaced after scaling.

The simplest way to position a pivoted mesh in world space following rotation or scaling is to use the difference between ```mesh.position``` and ```mesh.getAbsolutePosition```. For example to position a pivoted mesh at (x, y, z) in world space use

```javascript
mesh.position = new BABYLON.Vector3(x, y, z);
mesh.position = mesh.position.add(mesh.position.subtract(mesh.getAbsolutePosition()));
```

<Playground id="#T6IN6X#4" title="Set Pivot Mesh Position" description="Setting the position of a pivot mesh in world space."/>

### Get Pivot Point

After using ```setPivotPoint``` then ```getPivotPoint``` will give you the relative position of the pivot point to the _local origin_ and `getAbsolutePivotPoint` its position in world space.

## How To Set the Pivot using a Matrix
This is achieved using

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(Vector3));
```

To set a pivot at the point (x, y, z) with a translation matrix using

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z));
```
Note the change of sign.

<Playground id="#T6IN6X#5" title="Set Pivot Point by Matrix" description="Setting a pivot point at front, left, bottom corner of a displaced cube."/>

### Breaking Change
From Babylon.js v3.2 this method produces the same results as using ```setPivotPoint```.

Before v3.2 this would result in the mesh being moved and the local origin of the mesh being reset to the pivot point. Should you want to maintain the older behaviour of moving the mesh a second parameter, `false` is needed

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z), false);
```

**STRESSED NOTE** For those of you who wrote code using a pivot for versions of Babylon.js before v3.2 and who want to update the version of Babylon.js to a current one should change each occurrence, in their project code, of

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z));
```

to

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z), false);
```

### How To Set Pivot Position to World Space Coordinates

When there is a mesh at position (xc, yc, zc) you want to set a pivot at (xp, yp, zp) then you need to use (xc - xp, yc - yp, zc - zp) as the translation.

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(xc - xp, yc - yp, zc - zp));
```

To set the pivot of the cube at world space point (1, 1, 1)
```javascript
const pivotAt = new BABYLON.Vector3(1, 1, 1);
const translation = box.position.subtract(pivotAt)
box.setPivotMatrix(BABYLON.Matrix.Translation(translation.x, translation.y, translation.z));
```
<Playground id="#T6IN6X#6" title="Set Pivot Point by Matrix" description="Setting a pivot point in world space."/>








## 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."/>



## 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.



## Transformations
## Baking 
Usually, within Babylon.js, positioning, rotating and scaling a mesh changes its world matrix only and the vertex position data of a mesh is left unchanged. In certain situations you might be interested in applying a transform (position, rotation, scale) directly to the mesh vertices and leave world matrix unchanged. This is called baking and, of course, changes the center of transformation of the mesh, and can be useful in the following situations:

- building a set of static geometry
- randomizing a series of mesh copies
- mirroring a mesh along an axis
- etc.

The most straight forward way is to apply a transformation to the mesh. For example take a box of side 1 and position it at (0, 3, 0). Its vertices are stored as (-0.5, -0.5, -0.5), (0.5, -0.5, -0.5), (0.5, 0.5, -0.5), (-0.5, 0.5, -0.5), (-0.5, -0.5, 0.5), (0.5, -0.5, 0.5), (0.5, 0.5, 0.5), (-0.5, 0.5, 0.5) with its local origin of (0, 3, 0) stored in the world matrix. When this current transformation is baked into its vertices, the vertices are now stored as (-0.5, 2.5, -0.5), (0.5, 2.5, -0.5), (0.5, 3.5, -0.5), (-0.5, 3.5, -0.5), (-0.5, 2.5, 0.5), (0.5, 2.5, 0.5), (0.5, 3.5, 0.5), (-0.5, 3.5, 0.5) with a local origin of (0, 0, 0) stored in the world matrix. Any rotation now takes place with the center of rotation 3 below the middle of the box.

Baking a current transformation: <Playground id="#6AH5EL" title="Baking Current Transformation" description="Simple example of baking current transforms."/>

When the current transformation is baked into the mesh the local origin of the mesh is also altered so that the location and orientation of the mesh within the seen is not changed.


There is also a method, _bakeTransformIntoVertices_, to bake a matrix as a transformation into the vertices. This will bake the transformation provided by the matrix directly into the mesh vertices changing their values but leaving the world matrix unchanged.

usage:
```javascript
mesh.bakeTransformIntoVertices(matrix);
```

Baking using matrices <Playground id="#6AH5EL#1" title="Baking Using Matrices" description="Simple example of baking using matrices."/>

## Use With Scaling

When baking scaling the normals are simply scaled in their current direction and so baking a scale can often give unrealistic results for lighting. To correct this normals need to be recomputed. This is illustrated in the following picture: 

![Normals illustration](/img/resources/baking-transforms/normals.png) 

_In the above picture, you can see an untransformed mesh on the left, the same mesh with a baked scaling along the X axis in the middle and on the right, the mesh with its normals correctly recomputed._


You can do a recomputation of your normals like so:

```javascript
var indices = mesh.getIndices();
var normals = mesh.getVerticesData(VertexBuffer.NormalKind);
BABYLON.VertexData.ComputeNormals(positions, indices, normals);
mesh.updateVerticesData(VertexBuffer.NormalKind, normals, false, false);
```

**Note:**  recomputing the normals of your mesh may not be an ideal solution, as the results may be wrong in some parts of the mesh (e.g. seams on a sphere).

Unless you have good reasons to use baking transformations then your are better with parents and pivots.

Parents and Pivots

Transformation, Pivots and Parents

Coming next

Transform Node

Learn about the transform node in Babylon.js.

Parents and Children

Learn about parents and children in Babylon.js.

Pivots

Learn about pivots in Babylon.js.

Rotating Around Axis

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