
# Getting Started - Car Materials

## Car Material

Just as we used different images on different faces of a box, something similar is available for extruded polygons and cylinders.

For the car body, we use this image.

![car](/img/getstarted/car.webp)

and this one for the wheels

![wheel](/img/getstarted/wheel.webp)

For the cylinder, face 0 is the bottom, face 2 is the top, and face 1 is the edge joining the bottom and top. For the extruded polygon, face 0 is the top and face 2 is the bottom. Remember that the car body and its wheels are currently built lying down.

The top and bottom of the car body use the image in the top-left (almost) quarter. The edge part, which goes across the bottom, around the front, across the top, and down the back of the body, uses the lower half of the image.

The top of the car body is as you would expect and is given by the bottom-left co-ordinates (0, 0.5) to the top-right co-ordinates (0.38, 1):

```javascript
faceUV[0] = new BABYLON.Vector4(0, 0.5, 0.38, 1);
```

The bottom of the car body uses the same image but it needs flipping over to fit the other side of the car.
```javascript
faceUV[2] = new BABYLON.Vector4(0.38, 1, 0, 0.5);
```

The edge runs from (0, 0) to (1, 0.5)
```javascript
faceUV[1] = new BABYLON.Vector4(0, 0, 1, 0.5);
```

<Playground id="#KDPAQ9#12" title="Adding Materials To The Car" description="Simple demonstration of adding a material to the extruded car body." image="/img/playgroundsAndNMEs/gettingStartedCarMaterials1.webp"/>

A wheel is more straightforward because of its symmetry, and it uses the whole image for the top and bottom while just picking up a black pixel for the edges.

```javascript
wheelUV[0] = new BABYLON.Vector4(0, 0, 1, 1);
wheelUV[1] = new BABYLON.Vector4(0, 0.5, 0, 0.5);
wheelUV[2] = new BABYLON.Vector4(0, 0, 1, 1);
```
Putting these together and rotating the finished car upright gives:

![car model](/img/getstarted/carmodel.webp)

<Playground id="#KDPAQ9#13" title="Adding Materials To The Wheels" description="Simple demonstration of adding a material to the extruded wheels." image="/img/playgroundsAndNMEs/gettingStartedCarMaterials2.webp"/> 

At last we are ready to think about animating the wheels.



# Getting Started - Wheel Animation

## Foundation of Animation

We will start with a wheel and rotate it about its axle. Remember that, to make the car upright, we rotated it about the x axis, so the axle is along the y axis of the cylinder.

We need to create a new animation object:

```javascript
const animWheel = new BABYLON.Animation("wheelAnimation", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
```

This has the following parameters: name, property to animate, animation frames per second, property-to-animate type, and loop mode, which in this case repeats the animation.

We follow this with the key frame array, where we set values for the property to animate by frame number.

```javascript
const wheelKeys = [];

//At the animation key 0, the value of rotation.y is 0
wheelKeys.push({
  frame: 0,
  value: 0,
});

//At the animation key 30, (after 1 sec since animation fps = 30) the value of rotation.y is 2PI for a complete rotation
wheelKeys.push({
  frame: 30,
  value: 2 * Math.PI,
});
```

Finally, we link the key frame array to the animation, link the animation to the mesh, and begin it.

```javascript
//set the keys
animWheel.setKeys(wheelKeys);

//Link this animation to the right back wheel
wheelRB.animations = [];
wheelRB.animations.push(animWheel);

//Begin animation - object to animate, first frame, last frame and loop if true
scene.beginAnimation(wheelRB, 0, 30, true);
```

<Playground id="#KDPAQ9#14" title="Simple Wheel Animation" description="Simple demonstration of animating one of the car's wheels." image="/img/playgroundsAndNMEs/gettingStartedWheelAnimation1.webp"/>

Since all the wheels rotate the same way, we can use the same animation for all of them.

```javascript
scene.beginAnimation(wheelRF, 0, 30, true);
scene.beginAnimation(wheelLB, 0, 30, true);
scene.beginAnimation(wheelLF, 0, 30, true);
```

To ensure that new code in later playgrounds is not overwhelmed by a large amount of previous code, we will save the car as a model and import and animate it as an item.

```javascript
BABYLON.ImportMeshAsync("url to model car" + "car.babylon").then(() => {
  const wheelRB = scene.getMeshByName("wheelRB");
  const wheelRF = scene.getMeshByName("wheelRF");
  const wheelLB = scene.getMeshByName("wheelLB");
  const wheelLF = scene.getMeshByName("wheelLF");

  scene.beginAnimation(wheelRB, 0, 30, true);
  scene.beginAnimation(wheelRF, 0, 30, true);
  scene.beginAnimation(wheelLB, 0, 30, true);
  scene.beginAnimation(wheelLF, 0, 30, true);
});
```

<Playground id="#KDPAQ9#15" title="Animating All 4 Wheels" description="Adding the wheel animation to all 4 tires." image="/img/playgroundsAndNMEs/gettingStartedWheelAnimation2.webp"/>

We can now animate the car itself and add it to the village.


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


Getting Started - Chapter 3 - Car Materials

Car Material