
## Overview of a Parent

Making mesh P a parent of mesh C 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.

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."/>



## 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](/divingDeeper/mesh/transforms#rotation) the axis is specified through the Euler angles alpha, beta, gamma, and using [rotationQuaternion](/divingDeeper/mesh/transforms) and [rotate](/divingDeeper/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](/divingDeeper/mesh/transforms/parent_pivot/transform_node), a parent and [setting a pivot](/divingDeeper/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

The latest pivot in Babylon (v3.2+) is a pre-transformation pivot and behaves differently than in tools like 3DS Max and Maya as the object's position will move if scale is applied prior to setting the pivot. To get pivot behavior that matches these tools it is recommended to set the object as a child of another transform node that will act as the pivot see: <Playground id="#GH4N1R#1" title="Simple Pivot Example" description="Simple pivot example."/>

A pivot can be set with a [translation matrix](/divingDeeper/mesh/transforms/parent_pivot/pivots#how-to-set-the-pivot-matrix) or directly with the [_setPivotPoint_](/divingDeeper/mesh/transforms/parent_pivot/pivots#how-to-set-and-get-a-pivot-point) method.

A pivot in Babylon.js is the center of transformation for a mesh, that is the point used as the center of rotation or the center of enlargement. When a mesh is created the pivot (red sphere) is always at the local origin (yellow sphere) and the local origin always at the world origin, as in Fig 1. When the pivot and local origin are coincident they are shown as a red and yellow striped sphere.

![Initial Creation of The Box](/img/how_to/pivots/pivot1.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 1

When positioning a mesh it is the local origin that is placed at the given position, for example

```javascript
box.position.x = 2;
```

moves the box as in Fig 2

![Box Repositioned](/img/how_to/pivots/pivot2.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 2.

Now, mathematically, it is always more straight forward to rotate or enlarge about the local origin and any code to that does rotation and enlargement uses that principle.

When you want the pivot to be at a corner as in Fig 3 the way this is done is to translate the box corner to the local origin resulting as in Fig 4.

![Corner Pivot](/img/how_to/pivots/pivot3.png) ![Box Translate](/img/how_to/pivots/pivot4.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 3. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 4.

Since it is the box that is translated the values used in the translation will be negative with regard to position. For example given a cube with sides of length 2 to set the pivot at position (-1, -1, -1) requires a translation of (1, 1, 1).

Prior to Babylon.js v3.2 setting a pivot meant that the mesh was translated as in Fig 4 and the local origin of the mesh was reset to the pivot point. This meant that after setting a pivot when you reset the the position of the mesh it was the pivot that was placed at this position. Compare Fig 2 with Fig 5 which shows the result of setting a pivot with the move mesh method followed by

```javascript
box.position.x = 2;
```

![Box Repositioned after pivot added < 3.2](/img/how_to/pivots/pivot5.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 5.

From Babylon.js v3.2 there is a breaking change and setting the pivot no longer produces a change in position of the mesh unless the mesh has been scaled.

![Box Repositioned after pivot added from 3.2](/img/how_to/pivots/pivot6.png)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fig 6.

Fig 6 shows result of using setting a pivot with this method followed by

```javascript
box.position.x = 2;
```

Compare this with Fig 5.

So there are two ways of setting a pivot, one that does not alter the position of the mesh (_set pivot only_) and one that does alter the mesh position (_set pivot with move_). The _set pivot only_ method is much more straightforward and all playground examples on this page use this method. The [_setPivotPoint_](/divingDeeper/mesh/transforms/parent_pivot/pivots#how-to-set-and-get-a-pivot-point) function, describe later, uses _set pivot only_.

In fact unless you have an older project coded for versions before 3.2 or want to [change the local origin to that of the pivot](/divingDeeper/mesh/transforms#pivot) do not use the _set pivot with move_ method. It is usually better to _set pivot only_ and then move the mesh as normal with _mesh.position_ or _mesh.translate_ When you do have an older project there is a simple way to update your project code to work with version 3.2 or later as described in the `Breaking Change` section below.

## Breaking Change

You set a pivot at the point (x, y, z) with a translation matrix that using

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z));
```

Before v3.2 this would result in the mesh being moved and the local origin of the mesh being reset to the pivot point.

From v3.2 this results in the pivot point being set without the mesh being moved and the current local origin of the mesh is kept. 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 the Pivot Matrix

To set a pivot at (x, y, z) relative to the local origin of a mesh requires the applied translation to be (-x, -y, -z).

```javascript
mesh.setPivotMatrix(BABYLON.Matrix.Translation(-x, -y, -z));
```

 <Playground id="#3RTT8P" title="Set Pivot Matrix" description="Simple example of setting a pivot matrix."/>

## 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));
```

<Playground id="#3RTT8P#2" title="Set Pivot With World Coordinates" description="Simple example of setting a pivot with world coordinates."/>

## How To Reset the Pivot

Simply recalculate the translation of the pivot to the local origin of the mesh as above.

The following sequence of playgrounds goes from setting the first pivot position to scaling about the second pivot position

<Playground id="#3RTT8P#3" title="Set First Pivot" description="Simple example of setting a first pivot."/>
<Playground id="#3RTT8P#11" title="Set Second Pivot" description="Simple example of setting a second pivot."/>
<Playground id="#3RTT8P#12" title="Scaling From Second Pivot" description="Simple example of scaling from a second pivot."/>

**NOTE:** When a mesh has been rotated before resetting the pivot on resetting the pivot the mesh will move since the current rotation will be applied to the new pivot point.

The following sequence of playgrounds shows setting the first pivot, rotating around the pivot then resetting the pivot.

<Playground id="#3RTT8P#3" title="Set First Pivot" description="Simple example of setting a first pivot."/>
<Playground id="#3RTT8P#6" title="Rotate About First Pivot" description="Simple example of rotating about a first pivot."/>
<Playground id="#3RTT8P#7" title="Set Second Pivot" description="Simple example of setting a second pivot."/>

## How To Set and Get a Pivot Point

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));
```

<Playground id="#3RTT8P#8" title="Set Pivot Point" description="Simple example of setting a pivot point."/>

When there is a mesh at position (xc, yc, zc) you want to set a pivot at (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));
```

<Playground id="#3RTT8P#9" title="Set Pivot Point" description="Simple example of setting a pivot point."/>

The following sequence of playgrounds goes from setting the first pivot point to scaling about the second pivot point

<Playground id="#3RTT8P#10" title="Set First Pivot Point" description="Simple example of setting a first pivot point."/>
<Playground id="#3RTT8P#14" title="Set Second Pivot Point" description="Simple example of setting a second pivot point."/>
<Playground id="#3RTT8P#15" title="Scaling From Second Pivot Point" description="Simple example of scaling from a second pivot point."/>

It is possible to reset the pivot point and maintain the position and rotation of the mesh.

To do this the current rotation of the mesh has to be stored and then the mesh's rotation set to (0, 0, 0) before the pivot point is reset. The current rotation is then re-applied to the mesh.

The following sequence of playgrounds shows setting the first pivot point, rotating the pivot then resetting the pivot point and re-applying the rotation.

<Playground id="#3RTT8P#10" title="Set First Pivot Point" description="Simple example of setting a first pivot point."/>
<Playground id="#3RTT8P#16" title="Rotate About First Pivot Point" description="Simple example of rotating about a first pivot point."/>
<Playground id="#3RTT8P#17" title="Set Second Pivot Point and Rotate" description="Simple example of setting a second pivot point and rotating."/>

### Get Pivot Point

When using `getPivotPoint` or `getAbsolutePivotPoint` the results obtained depend on whether you are using a _set pivot only_ method, that is `setPivotMatrix(translation)` or `setPivotPoint` or the _set pivot with move_ method, that is `setPivotMatrix(translation)`.

In both of the following cases the box has then been rotated through 90 degrees, positioned at (6, 1, 2) and the pivot has been set to world position (5, 0, 1) which is (-1, -1, -1) relative to the current position of the local origin of the box.

**Set Pivot Only Method**

![Pivoted Box](/img/how_to/pivots/pivot7.png)

| Getter                      | &nbsp;Results&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Explanation                                                            |
| --------------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------- |
| box.position                | (6, 1, 2)                                               | Position as set                                                        |
| box.getAbsolutePosition()   | (6, 1, 0)                                               | Position of box (yellow sphere) as seen, in world coordinates          |
| box.getPivotPoint()         | (-1, -1, -1)                                            | Position of pivot (red sphere) relative to local origin of box, as set |
| box.getAbsolutePivotPoint() | (5, 0, 1)                                               | Position of pivot as seen, in world coordinates                        |

**Set Pivot Only Method**

![Pivoted Box](/img/how_to/pivots/pivot8.png)

| Getter                      | &nbsp;Results&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | Explanation                                                                                                |
| --------------------------- | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
| box.position                | (6, 1, 2)                                               | Position as set                                                                                            |
| box.getAbsolutePosition()   | (7, 2, 1)                                               | World coordinate position of the created origin of box (green sphere)                                      |
| box.getPivotPoint()         | (-1, -1, -1)                                            | Position of pivot (red/yellow sphere) relative to the created origin of box                                |
| box.getAbsolutePivotPoint() | (6, 1, 2)                                               | Position of pivot which is the same as the position of the box due to the change in the box's local origin |

This table alone shows one good reason not to use the _set pivot with move_ method unless for amending old projects.


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


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