
# Getting Started - Mesh Parents

## Parents and Children

We are going to add a very simple car that moves through the village. 

No matter how simple, a car needs wheels, and we have to combine the body of the car and the wheels. 

![car model](/img/getstarted/carmodel.webp)

Merging the meshes would result in the wheels not being able to rotate. Instead, we set the body of the car as the parent of each wheel.

Before building our simple car, let's look at a way to set a parent and what this means.

```javascript
meshChild.parent = meshParent
```

Any position, scaling, or rotation applied to the parent will also be applied to the child. Setting the position of the child is done in the parent space; setting the rotation and scale of the child takes place in the child's local space.

You can vary the values in the following playground to see the effect on the parent and child.

<Playground id="#GMEI6U#1715" title="Understanding Parenting" description="Simple playground to help demonstrate parenting." image="/img/playgroundsAndNMEs/gettingStartedParents.webp"/>

Now we are ready to build the car and afterwards to animate it.

You can read more about [parenting](/features/featuresDeepDive/mesh/transforms/parent_pivot).



# Getting Started - Extruding Polygons

## Building the Car
The car is going to be a very simple one. The body will be built using the *extrudePolygon* method. This is another shape that can be built using *MeshBuilder*. The outline of the shape is drawn in the XZ plane, with points in counter-clockwise order, and the extrusion is in the Y direction. The origin for the polygon is the zero point on the bottom plane.

The outline for the car consists of an array of Vector3 points forming a horizontal baseline, a quarter circle for the front, followed by a horizontal top line. The vertical back is formed by the *extrudePolygon* method, as it automatically joins the first and last points.

```javascript
//base
const outline = [
    new BABYLON.Vector3(-0.3, 0, -0.1),
    new BABYLON.Vector3(0.2, 0, -0.1),
]

//curved front
for (let i = 0; i < 20; i++) {
    outline.push(new BABYLON.Vector3(0.2 * Math.cos(i * Math.PI / 40), 0, 0.2 * Math.sin(i * Math.PI / 40) - 0.1));
}

//top
outline.push(new BABYLON.Vector3(0, 0, 0.1));
outline.push(new BABYLON.Vector3(-0.3, 0, 0.1));
```

These, together with the depth to extrude along Y, give the shape for the car.
```javascript
const car = BABYLON.MeshBuilder.ExtrudePolygon("car", {shape: outline, depth: 0.2});
```

> Note: The *extrudePolygon* and [PolygonMeshBuilder](https://doc.babylonjs.com/divingDeeper/mesh/creation/param/polyMeshBuilder) both use a *earcut* slicing algorithm.  
> The playground has earcut defined, but if you are following this tutorial on your own file system, you will need to download the earcut algorithm via [CDN](https://unpkg.com/earcut@latest/dist/earcut.min.js) or [NPM](https://github.com/mapbox/earcut#install).  
> If you are using TypeScript then you can inject the earcut algorithm as the *earcutInjection* parameter on the [extrudePolygon function](https://doc.babylonjs.com/typedoc/classes/babylon.meshbuilder#extrudepolygon).

<Playground id="#KDPAQ9#10" title="Learning to Extrude" description="Simple demonstration showing the basics of extruding meshes." image="/img/playgroundsAndNMEs/gettingStartedExtrude1.webp"/>

We form the wheel for the right-back position from a cylinder and add it as a child of the car. We then make copies for the right-front, left-back, and left-front wheels. This time, we use *clone* rather than *createInstance*, since we can clone a clone. When we clone a wheel, the clone inherits the wheel's parent.

```javascript
const wheelRB = BABYLON.MeshBuilder.CreateCylinder("wheelRB", {diameter: 0.125, height: 0.05})
wheelRB.parent = car;
wheelRB.position.z = -0.1;
wheelRB.position.x = -0.2;
wheelRB.position.y = 0.035;

const wheelRF = wheelRB.clone("wheelRF");
wheelRF.position.x = 0.1;

const wheelLB = wheelRB.clone("wheelLB");
wheelLB.position.y = -0.2 - 0.035;

const wheelLF = wheelRF.clone("wheelLF");
wheelLF.position.y = -0.2 - 0.035;
```

<Playground id="#KDPAQ9#11" title="Extruding Wheels" description="Expanding on the basics of extruding meshes." image="/img/playgroundsAndNMEs/gettingStartedExtrude2.webp"/>

Now we will make the car look a bit more like a real car by using some textures.



## Animating the Village

Our village is not very lively at the moment, so let's add some animation. We are still in the early stages of learning Babylon.js and nowhere near adding a Sims family. The parents and children you are about to meet are the silent type: a way of linking meshes so that changes to a parent mesh are also applied to its child meshes. We are going to animate a very simple car with wheels that are children of the parent car body. Unlike a real car, it is the car body that takes the wheels with it. There is one way that our mesh parents and children behave like a real family: the children can act independently of the parent. Which is just as well, because we do not want the car to rotate with the wheels.

Of course, you do not have to build an animation of your own. You can import a ready-made one, and we will show you the basics of importing an animated character and having it move around the village.

Getting Started - Chapter 3 - Mesh Parents

Parents and Children