
# 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 - Car Animation

## Animate the Car in the Village

In a similar way to how we animated the wheels, we now animate the car so that it travels in a straight line over 5 seconds, stops for 2 seconds, and then repeats.
```javascript
const animCar = new BABYLON.Animation("carAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const carKeys = []; 

carKeys.push({
    frame: 0,
    value: -4
});

carKeys.push({
    frame: 150,
    value: 4
});

carKeys.push({
    frame: 210,
    value: 4
});

animCar.setKeys(carKeys);

car.animations = [];
car.animations.push(animCar);

scene.beginAnimation(car, 0, 210, true);
```

<Playground id="#KDPAQ9#5561" title="Animated the Car Forward" description="Simple example of how to animate the car's position forward." image="/img/playgroundsAndNMEs/gettingStartedCarAnimation1.webp"/>

After adjusting the position of the car and its route so that it travels past the village houses, we have:

<Playground id="#KJ6XKH#1" title="Add the Car to the Village" description="Add the animating car back into the village." image="/img/playgroundsAndNMEs/gettingStartedCarAnimation2.webp"/>

In this case, we built the car ourselves. Let's now look at a model character that we can import along with its built-in animation.



# 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 - Character Animation

## A Walking Figure

Sometimes the easiest way to add a model to a scene is to obtain one from elsewhere. This could be one you have created in your favorite model-building software or one you have purchased.

The _Dude_ model is one that has been built with its own skeleton animation.

![dude walking](/img/getstarted/dude.webp)

Once imported, the character and its skeleton are obtained from the meshes and skeletons properties of the result object.

```javascript
BABYLON.ImportMeshAsync("/scenes/Dude/Dude.babylon" /* model file */, scene, { meshNames: "him" }).then((result) => {
  var dude = result.meshes[0];
  dude.scaling = new BABYLON.Vector3(0.25, 0.25, 0.25);

  scene.beginAnimation(result.skeletons[0], 0, 100, true, 1.0);
});
```

<Playground id="#SFW46K#1371" title="Loading an Animated Character" description="Simple example of loading an animated character into your scene." image="/img/playgroundsAndNMEs/getingStartedCharacterAnimation.webp"/>

Currently, the character stands in one position, and we would like him to walk around the village. This time, instead of creating another animation object for the character, we will change its position and orientation before each frame is rendered.


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




# Getting Started - Working With Code

## A Walk Around The Village

There is a useful property of a mesh, *movePOV*, which allows us to move a mesh relative to its point of view. Generally, a newly created mesh is considered to face the negative z direction, and this is the direction of its point of view. To move a mesh forward 6 units in the direction of its point of view, you use

```javascript
mesh.movePOV(0, 0, -6)
```
The parameters are, in order, the distance to move to the right, up, and forward. In the mesh's local space, these are generally the negative x axis, the positive y axis, and the negative z axis.

In Babylon.js you can write code that will be executed before the rendering of the next frame using

```javascript
scene.onBeforeRenderObservable.add(() => {
    //code to execute
});
```

In this way, the properties of objects can be changed frame by frame as the scene renders.

Let us take the simple case of a sphere moving around the edges of a triangle. We want the sphere to appear to slide along one side, turn to slide along the next, then turn and slide along the last side before repeating.

This is also an opportunity to introduce two types of mesh you can create: a sphere and a series of lines. Take a sphere sliding around an isosceles right-angled triangle as an example.

```javascript
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 0.25});

//end points for the line sequence in an array
//y component can be non zero
const points = [];
points.push(new BABYLON.Vector3(2, 0, 2));
points.push(new BABYLON.Vector3(2, 0, -2));
points.push(new BABYLON.Vector3(-2, 0, -2));
points.push(points[0]); //close the triangle;

BABYLON.MeshBuilder.CreateLines("triangle", {points: points})
```

Also you can see another method, *rotate*, of rotating. This method rotates the mesh about the given axis by the given angle in radians. It adds to the current rotation.
```javascript
mesh.rotate(axis, angle, BABYLON.Space.LOCAL);
```

To produce the animation, the sphere moves a distance of 0.05 before each render frame. When the distance it has travelled is greater than 4, the sphere makes a turn. When it is greater than 8, it turns again, and when it is greater than the perimeter, it resets and starts again.

We set up a track array of objects with the properties turn and distance. After travelling the given total distance, the sphere rotates by the given turn value.

```javascript
const slide = function (turn, dist) { //after covering dist apply turn
    this.turn = turn;
    this.dist = dist;
}
const track = [];
track.push(new slide(Math.PI / 2, 4));  //first side length 4
track.push(new slide(3 * Math.PI / 4, 8)); //at finish of second side distance covered is 4 + 4
track.push(new slide(3 * Math.PI / 4, 8 + 4 * Math.sqrt(2))); //all three sides cover the distance 4 + 4 + 4 * sqrt(2)
```

Whenever the required distance is reached, a turn is made and the array index pointer, p, is increased by 1. The modulo operator *%* is used to reset the pointer to zero at the end of the array.

```javascript
if (distance > track[p].dist) {        
    sphere.rotate(BABYLON.Axis.Y, track[p].turn, BABYLON.Space.LOCAL);
    p +=1;
    p %= track.length;
}
```

To prevent floating-point errors from accumulating, whenever the index pointer is reset to 0, the position and rotation of the sphere are also reset.

```javascript
if (p === 0) {
    distance = 0;
    sphere.position = new BABYLON.Vector3(2, 0, 2); //reset to initial conditions
    sphere.rotation = BABYLON.Vector3.Zero();//prevents error accumulation 
}
```

<Playground id="#N9IZ8M#1" title="Animating To a Path" description="Simple example of animating an object along a path." image="/img/playgroundsAndNMEs/gettingStartedVillageWalk1.webp"/>

This is a little trickier, and by using a bit of trial and error for the turns and distances, we can achieve a more complicated walk for the character around the village. One reason for using degrees and converting them to radians for the *rotate* method is that it is easier to adjust by adding one or two degrees.

Since the character, dude, imported from the *.babylon* file has had its rotation set using a *rotationQuaternion* rather than rotation, we use the rotate method to reset the character's orientation.

```javascript
dude.position = new BABYLON.Vector3(-6, 0, 0);
dude.rotate(BABYLON.Axis.Y, BABYLON.Tools.ToRadians(-95), BABYLON.Space.LOCAL);
const startRotation = dude.rotationQuaternion.clone(); //use clone so that variables are independent not linked copies
```

```javascript
if (p === 0) {
    distance = 0;
    dude.position = new BABYLON.Vector3(-6, 0, 0);
    dude.rotationQuaternion = startRotation.clone();
}
```

<Playground id="#KBS9I5#81" title="Character Walking Through Town" description="Animate a character walking through the village." image="/img/playgroundsAndNMEs/gettingStartedVillageWalk2.webp"/>

We now have two things moving around the village: a car and a character. How can we avoid them colliding?



## 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 - Web App Layout

## Varying Web App Layout
While you probably want your game or app to take up most of the page, you might also want some space for instructions, for example. Just place your *&lt;canvas&gt;* element in a *&lt;div&gt;* and arrange the elements as you need.

```html
<div id = "holder">
        <canvas id="renderCanvas" touch-action="none"></canvas> 
</div>
<div id = "instructions">
    <br/>
    <h2>Instructions</h2>
    <br/>
    Instructions Instructions Instructions Instructions Instructions 
    Instructions Instructions Instructions Instructions Instructions 
</div>
```
with additional styles:
```html
<style>
    #holder {
        width: 80%;
        height: 100%;
        float: left;
    }

    #instructions {
        width: 20%;
        height: 100%;
        float: left;
        background-color: grey;
    }
</style>
```

[Example App and Instructions](/webpages/app3.html) importing the model village

You could, of course, still build your scene completely from code.

[Example App and Instructions](/webpages/app4.html) building the village from code

During the next stage in developing the world, we are going to add movement by animating a very basic car. A car needs wheels that turn independently of the car body. To see how this is achieved, we need to look at parenting the wheels to the body.

Getting Started - Chapter 3 - Village Animation

Animating the Village

Coming next

Getting Started - Chapter 3 - Extruding Polygons

Learn to create your own meshes by extruding mesh faces.

Getting Started - Chapter 3 - Mesh Parents

Learn the basics of parenting objects in your scene.

Getting Started - Chapter 3 - Car Materials

Learn to add materials to extruded meshes.

Getting Started - Chapter 3 - Wheel Animation

Learn the basics of animations in Babylon.js.

Getting Started - Chapter 3 - Car Animation

Continue learning about animations in Babylon.js.

Getting Started - Chapter 3 - Character Animation

Learn to load objects with animation, into your scene.

Getting Started - Chapter 3 - A Walk Around The Village

Learn to move an animating object through your scene.