Getting Started - Chapter 3 - 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 base line, a quarter circle for the front, followed by a horizontal base line. The vertical back will be formed by the extrudePolygon method as it automatically joins the first and last point.

//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 and the depth to extrude along Y, give the shape for the car

const car = BABYLON.MeshBuilder.ExtrudePolygon("car", {shape: outline, depth: 0.2});

Note: The extrudePolygon and PolygonMeshBuilder both use a earcut slicing algorithm.
The playground has earcut defined but if you are following this tutorial on your own file system that you will need to download the earcut algorithm via cdn or npm.
If you are using TypeScript then you can inject the earcut algorithm as the earcutInjection parameter on the extudePolygon function.

We form the wheel for the right back position from a cylinder and add it as a child to the car. Then make copies for the right front, left back and left front wheels. This time using clone rather than createInstance since we can clone a clone. When we clone a wheel its parent is made the parent of the clone.

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;

Now we will make the car look a bit more like a car using some textures.