# Getting Started - Web App Layout

## Varying Web App Layout
Whilst you probably want your game or app to take up most of the page you might want some space for instructions as an 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 - Combining Meshes

## Combining Meshes Using Merge Meshes
This is a straight forwarded way of combining two or more meshes.

```javascript
const combined = BABYLON.Mesh.MergeMeshes(Array_of_Meshes_to_Combine)
```
In our case this would be
```javascript
const house = BABYLON.Mesh.MergeMeshes([box, roof])
```
<Playground id="#KBS9I5#75" title="Combining Meshes In Your Scene" description="A playground demonstrating how to combine meshes inside of your scene." image="/img/playgroundsAndNMEs/gettingStartedCombineMeshes.jpg"/>

![house 5](/img/getstarted/house5.png)

The first thing we note is that the whole house is covered in only one of the materials used. Fortunately this can be corrected using the multiMultiMaterial parameter of *MergeMeshes*, unfortunately this is the final parameter of a long list. The code now looks like
```javascript
const house = BABYLON.Mesh.MergeMeshes([box, roof], true, false, null, false, true);
```
At this stage it is important to note that the second parameter being true disposes of the original meshes and the last parameter being true allows the original material to be applied separately to the parts matching the original meshes.

<Playground id="#KBS9I5#76" title="Combining Meshes And Preserving Material Assignments" description="A playground demonstrating how to combine meshes while preserving material assignments." image="/img/playgroundsAndNMEs/gettingStartedCombineMeshes2.jpg"/>

![house 3](/img/getstarted/house3.png)

Before considering how to make multiple copies of our house we will first: find out the basics of [exporting](/extensions/glTFExporter) our models; how to [import](/divingDeeper/importers) models made with Babylon.js or other software; and how to display your scene or models on your own website.


# Getting Started - Making Copies

## Copying Meshes
The two main ways to copy a mesh is to clone it or create an instance of it. Cloning gives you an independent copy of a mesh whereas an instance is still linked to the original for its material. You cannot change the material of an instance of a mesh. There are also advanced ways of creating copies which are available in the *Mesh Chapter*

To clone the house use

```javascript
clonedHouse = house.clone("clonedHouse")
```
and for an instance it is
```javascript
instanceHouse = house.createInstance("instanceHouse")
```

As at this point in our world all the houses will use the same material we will go with *createInstance*.

Before we do that we combine the building functions to produce a house of width 1 or 2, a detached or semi-detached house respectively.

<Playground id="#KBS9I5#77" title="Expanding the House Building Function" description="A playground expanding the house building function to accept a width of 1 or 2 for a detached or semi-detached house." image="/img/playgroundsAndNMEs/gettingStartedCopies1.jpg"/>

We now enlarge the ground and increase the camera radius a little to fit several house on and be able to view them.
To begin we build one house of each type and position them. Afterwards we will create instances of these for the remaining houses. After deciding on the type, position and orientation for the other houses we will use a loop to create the them.

```javascript
const houses = [];

for (let i = 0; i < places.length; i++) {
    if (places[i][0] === 1) {
        houses[i] = detached_house.createInstance("house" + i);
    }
    else {
        houses[i] = semi_house.createInstance("house" + i);
    }
    houses[i].rotation.y = places[i][1];
    houses[i].position.x = places[i][2];
    houses[i].position.z = places[i][3];
}
```

<Playground id="#KBS9I5#78" title="Creating Multiple House Instances" description="A playground demonstrating how to create instances of a 3D object." image="/img/playgroundsAndNMEs/gettingStartedCopies2.jpg"/>

![Village 1](/img/getstarted/village1.png)

As before, in order to keep the upper parts of the playground editor for newer code we will put the building of these houses into a function.

<Playground id="#KBS9I5#79" title="Wrapping Instances Into a Function" description="Wrapping the house instancing loop into a function." image="/img/playgroundsAndNMEs/gettingStartedCopies2.jpg"/>

Now the world we are building is a little more complex let's take a file of the village and re-visit viewing it as part of a web site we want to enhance.

<Playground id="#KBS9I5#80" title="Importing the Village as a .glb File" description="An example of how to load a .glb of the starting village into your scene." image="/img/playgroundsAndNMEs/gettingStartedCopies2.jpg"/>







# Getting Started - Face Materials

## Material For Each House Side

In the options properties for a box one is *faceUV* and array of Vector4s. We can use this to obtain a part of the area of an image to apply to one face of the box.

In the *faceUV* array faces are numbered 0 for back, 1 front, 2 right, 3 left, 4 top and 5 bottom.

## Detached House Example
We will start with this image

![cubehouse texture](/img/getstarted/cubehouse.png)

which contains, in order, images of the same size for the front, right, back and left sides of the house.

The width of each image is 0.25 of the whole image width. To specify the part of the image to use we give two co-ordinates one for the lower left corner and one for the upper right corner. For the whole image we would use (0, 0) and (1, 1), for part images the co-ordinate values will be a fraction between 0 and 1.

Rather then using two sets of co-ordinates we use a 4 dimensional  
vector (lower left x, lower left y, upper right x, upper right y)

Matching sides to part images gives  
front, 1, (0.0, 0.0, 0.25, 1.0)  
right, 2, (0.25, 0, 0.5, 1.0)  
back, 0, (0.5, 0.0, 0.75, 1.0)  
left, 3, (0.75, 0, 1.0, 1.0)  
as the top and bottom are not seen we will just use the defaults.

We set these using
```javascript
faceUV = [];
faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face
faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face
faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side
faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side
```

Unless we set another option property, *wrap = true*, some of these partial images will still be rotated. We create the box like this
```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {faceUV: faceUV, wrap: true});
```
Of course we also need to change the image used for the diffuse texture of the box material.

<Playground id="#KBS9I5#72" title="Adding Materials To Individual Object Faces" description="A playground demonstrating how to add materials to individual faces of the objects in your scene." image="/img/playgroundsAndNMEs/gettingStartedFaceMaterials.jpg"/>

![house 3](/img/getstarted/house3.png)

## Semi Detached House Example
In this case the house is twice as wide and so are parts of the image

![semihouse texture](/img/getstarted/semihouse.png)

The front and back of the house (far left and right of the image) is twice the width of a side (middle image) which we can use twice.

<Playground id="#KBS9I5#73" title="Reusing Materials On Individual Object Faces" description="A playground demonstrating how to add reuse materials to apply on individual faces of the objects in your scene." image="/img/playgroundsAndNMEs/gettingStartedFaceMaterialsDoubled.jpg"/>

![house 4](/img/getstarted/house4.png)

## Moving On

Having created our detached and semi-detached houses we would like many copies of them to form our world. We could make, separately, copies of the boxes and the roofs but it would be easier if we could combine a box and roof into one mesh, a house. Before we do this let's tidy up the code so that we can concentrate on the new code we are adding. To this end we place the existing code into functions.

<Playground id="#KBS9I5#74" title="Wrapping House Building Into Functions" description="A playground wrapping mesh-building code into functions for future repeat use." image="/img/playgroundsAndNMEs/gettingStartedFaceMaterials.jpg"/>


# Getting Started - Ground

## Grounding the World
At the moment we have a box floating in space. To make the scene more world like let's add ground and think of our box as a building set on the ground.

Adding a ground is simple using

```javascript
const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:10, height:10});
```
As we need to create a ground large enough, to put some buildings (boxes) on, the options parameter has two properties set, width in the x direction and height in the z direction. (Yes, we agree, since y is vertical it would make more sense for the properties to be width and depth.)

<Playground id="#KBS9I5#67" title="Adding a Ground Playground" description="A playground showing how to add a basic ground plane to your scene." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>

The immediate thing to note is that  the ground cuts through the middle of the box. This is because when they are created meshes are positioned at the origin.

![ground](/img/getstarted/ground.png)

We need to move the box up half its height using

```javascript
box.position.y = 0.5;  //box created with default size so height is 1
```

<Playground id="#KBS9I5#66" title="Adjusting the Box position." description="A playground showing how to adjust the position of the box." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>

![house 0](/img/getstarted/house0.png)

Currently our world is silent. Let's add some sound.



# Getting Started - Texture

## Add Texture
In order to add color and texture to our meshes we apply a material to them. The basic material is the standard material created like this

```javascript
const material = new BABYLON.StandardMaterial("name", scene);
```
Let's make the ground color green for grass

```javascript
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
ground.material = groundMat; //Place the material property of the ground
```
Since there is only one scene we can drop that parameter and let it default to the current scene.

Setting a color requires three parameters, red, green, blue (r, g, b) each 0 - 1 inclusive (0, 0, 0) is black and (1, 1, 1) is white.  
For these colors you can use
```javascript
new BABYLON.Color3.Red();
new BABYLON.Color3.Green();
new BABYLON.Color3.Blue();
new BABYLON.Color3.Black();
new BABYLON.Color3.White();
new BABYLON.Color3.Purple();
new BABYLON.Color3.Magenta();
new BABYLON.Color3.Yellow();
new BABYLON.Color3.Gray(),
new BABYLON.Color3.Teal();
```
Now some texture for the box and roof
```javascript
const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg", scene);
const boxMat = new BABYLON.StandardMaterial("boxMat");
boxMat.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png");
```
The first parameter for a texture is a relative or absolute url to the image to be used. As usual the scene parameter is optional and will default to the current scene.

Finally of course set their material properties
```
roof.material = roofMat;
box.material = boxMat;
```

<Playground id="#KBS9I5#71" title="Adding Materials To Your Objects'" description="A playground demonstrating how to add materials to the objects in your scene." image="/img/playgroundsAndNMEs/gettingStartedMaterials.jpg"/>

![house 2](/img/getstarted/house2.png)

Having stone walls with no doors or windows is not an interesting look for a house. Also when you look closely you can see that each side uses the same image and on some sides it is rotated. 



# Getting Started - Mesh Placement

## Place and Scale a Mesh

### Size
Some meshes, such as box, have properties that you can set to change during their creation.

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {width: 2, height: 1.5, depth: 3})
```

After creation, and for meshes that do not have sizing options, changes in size are achieved by scaling the mesh.

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling.x = 2;
box.scaling.y = 1.5;
box.scaling.z = 3;
```

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", {}); //unit cube
box.scaling = new BABYLON.Vector3(2, 1.5, 3);
```

As you can see, from the above codes, scaling is a vector object with properties x, y, and z.

All three of the above sets of codes will produce boxes of the same size

## Position
For the majority of meshes the [position](/divingDeeper/mesh/transforms/center_origin/position) property places the center of the mesh at that position. Position is also a vector object with properties x, y, and z, so that the following two sets of codes position the box in the same place.

```javascript
box.position.x = -2;
box.position.y = 4.2;
box.position.z = 0.1;
```

```javascript
box.position = new BABYLON.Vector3(-2, 4.2, 0.1);
```

We can now use positions to place the boxes sized in three different ways in one playground. In each case the height of a box is 1.5 and therefore for each box position.y = 0.75 to place it on the ground.

<Playground id="#KBS9I5#68" title="Positioning Meshes" description="A playground demonstrating different ways to position a mesh in your scene." image="/img/playgroundsAndNMEs/gettingStartedMeshPlacement.jpg"/>

### Orientation
As for scaling and position the [rotation](/divingDeeper/mesh/transforms/center_origin/rotation) property of a mesh is a vector object with properties x, y and z. However when building our first world we will only consider rotation about one axis since a setting a rotation about all three axes can be surprisingly confusing.

Rotations are given in radians. If you prefer working in degrees Babylon.js provides a conversion tool. Both these lines of code with produce the same rotation.

```javascript
box.rotation.y = Math.PI / 4;
box.rotation.y = BABYLON.Tools.ToRadians(45);
```

<Playground id="#KBS9I5#69" title="Rotating Meshes" description="A playground demonstrating how to rotate a mesh in your scene." image="/img/playgroundsAndNMEs/gettingStartedRotatingMeshes.jpg"/>

We can now change the size, position and orientate a mesh adding a little more variation to the box as a building. Before we place more boxes in the scene let us see if we can make them a little more building like.



# Getting Started - Sound

## Adding Sound

Adding sounds to your world is very easy.

For continuous sounds we use

```javascript
const sound = new BABYLON.Sound("name", "url to sound file", scene, null, { loop: true, autoplay: true });
```

<Playground id="#SFCC74#3" title="Adding Sound To Your Scene" description="A playground showing how easy it is to add sound to your scene." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>


To play a sound once we use

```javascript
const sound = new BABYLON.Sound("sound", "url to sound file", scene);
//Leave time for the sound file to load before playing it
sound.play();
```

To account for loading time, in the example below *setInterval* is used to play the sound every 3 seconds

<Playground id="#SFCC74#4" title="Playing Sound Every 3 Seconds" description="Set an interval to play a soundn every 3 seconds." image="/img/playgroundsAndNMEs/gettingStartedGround.jpg"/>

Since you probably prefer listening to your own music as you work and oft repeated sound can get annoying the above playground examples are the only ones in Getting Started that load sounds. 

Now back to making our world and the developing our buildings. Buildings come in varied sizes, positions and orientations and this will be true for the world we are creating.


# Getting Started - Basic House

## A Basic House
Adding a roof would make our box more house like. We need a prism like shape. Luckily we can do that using *CreateCylinder*. Well the name might imply a cylinder rather than a prism however in using it you need to state how may points around the circumference of the cylinder and for a prism we can use three points.

```javascript
const roof = BABYLON.MeshBuilder.CreateCylinder("roof", {diameter: 1.3, height: 1.2, tessellation: 3});
roof.scaling.x = 0.75;
roof.rotation.z = Math.PI / 2;
roof.position.y = 1.22;
```

Since the cylinder is created vertically we needed to rotate it to a horizontal position and scale it down in one direction so that the height of the roof is less than its width.

<Playground id="#KBS9I5#70" title="Adding a Prism Roof Using 'CreateCylinder'" description="A playground demonstrating how to add a 'prism' roof to your house." image="/img/playgroundsAndNMEs/gettingStartedPrism.jpg"/>

![house 1](/img/getstarted/house1.png)

The world will be improved with a little color and texture.


# Getting Started - The Viewer

## Changing the Viewer's Camera

What happens when we put the **Village** as a model in the viewer?

[Example Viewer - Village](/webpages/page2.html) using the default Viewer.

![View 2](/img/getstarted/view2.png)

We see that the ground flickers. Why is that? This is because by default the Viewer already adds a ground and where they overlap they 'fight' for supremacy.

How do we overcome this? We use the _extends_ attribute in the &le;babylon&gt; element and set it to minimal.

```javascript
<babylon extends="minimal" model="path to model file"></babylon>
```

This removes the default ground along with other aspects such as the Babylon.js link and the full screen icon giving

[Example Viewer - Village](/webpages/page3.html) using the minimal Viewer.

![view3](/img/getstarted/view3.png)

Removing the default ground has stopped the flickering. However the default Viewer calculates the extent of the model and adjusts the camera accordingly. By using _minimal_ the camera just defaults to close to the center of the model village.

When you want the camera further away you have to get your hands dirty with some code, which of course you can just copy and paste as needed.

To move the camera we have to adjust its _radius_ property. This has to be done before the model is loaded. Properties cannot be changed once the model is loaded in the Viewer. We need to remove the _model_ attribute from the &lt;babylon&gt; element to prevent the model loading before the camera radius can be changed. The &lt;babylon&gt; element must also be given an _id_ which is referenced by the script that will alter the camera properties.

```html
<babylon id="myViewer" extends="minimal"></babylon>
```

The following code sets the camera radius (and in this case its angle of depression) and then load the model using

```javascript
<script>
    BabylonViewer.viewerManager.getViewerPromiseById('myViewer').then((viewer) => {
        viewer.onSceneInitObservable.add(() => {
            viewer.sceneManager.camera.radius = 15; //set camera radius
            viewer.sceneManager.camera.beta = Math.PI / 2.2; //angle of depression
        });
        viewer.onEngineInitObservable.add((scene) => {
            viewer.loadModel({
                url: "path to model file"
            });
        });
    });
</script>
```

[Example Viewer - Village](/webpages/page4.html) adjusting the camera

When you are developing a web game or app you probably want more flexibility than the Viewer can give. Let's take another look at using the HTML template.



## From One to Many

A nice big step now as we take the simple box and turn it into a house, or two. As houses do not float we will create some ground and then see how we can position, rotate and re-size the house and set it on the ground. Since a blank box looks just like a blank box we will add texture to give it the appearance of having windows and doors. To keep the rain out let's add a roof mesh and merge the two meshes together. Of course a couple of houses do not make a village so we will see how we can copy a mesh as many times as we wish. Since builders are noisy workers we will show how you can include sounds but then silence them immediately as anything but the sounds you want to work with are distracting.

# A Web Application Template

You will have seen that the template needed for any code on the playground is
```javascript
var createScene = function() {
    var scene = new BABYLON.Scene(engine);

    // Add a camera to the scene and attach it to the canvas
    // Add a lights to the scene

    //Your Code

  return scene;
};
```

By following this format in you own project you can quickly drop it into your own HTML page using the following as a template.

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>

   <body>

	<canvas id="renderCanvas" touch-action="none"></canvas> 

	<script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
	</script>

   </body>

</html>
```

This line
```javascript
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
```
allows you to import models into your scene.

This line
```javascript
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
```
allows you to use a touch screen.

## Examples

### Import a Model Setup 
The following loads a box model into an app.

[First App](/webpages/app1.html)

Example setup for a loaded model
```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>

   <body>

	<canvas id="renderCanvas" touch-action="none"></canvas> 

	<script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        const createScene = function () {
    
            const scene = new BABYLON.Scene(engine);  

            BABYLON.SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon");

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            return scene;
        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
	</script>

   </body>

</html>
```

### Code a Model Setup
The following creates a box model in an app.

[First Coded App](/webpages/app2.html). A template creating a sphere and ground is downloadable from the [basic template page](/quickstart/js_html#html-basic-page-templates)

Example setup for a coded model

```html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Babylon Template</title>

        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
        </style>

        <script src="https://cdn.babylonjs.com/babylon.js"></script>
        <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
        <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    </head>

   <body>

	<canvas id="renderCanvas" touch-action="none"></canvas> 

	<script>
        const canvas = document.getElementById("renderCanvas"); // Get the canvas element
        const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

        // Add your code here matching the playground format
        const createScene = function () {
    
            const scene = new BABYLON.Scene(engine);  

            BABYLON.MeshBuilder.CreateBox("box", {})

            const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new BABYLON.Vector3(0, 0, 0));
            camera.attachControl(canvas, true);
            const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

            return scene;
        };

        const scene = createScene(); //Call the createScene function

        // Register a render loop to repeatedly render the scene
        engine.runRenderLoop(function () {
                scene.render();
        });

        // Watch for browser/canvas resize events
        window.addEventListener("resize", function () {
                engine.resize();
        });
	</script>

   </body>

</html>
```

Let's move on to learning more about using Babylon.js code and build more interesting models. We start with giving our world a ground to build on.

Getting Started - Chapter 2 - Build A Village

From One to Many

Coming next

Getting Started - Chapter 2 - Ground

Continue your Babylon.js learning by adding a ground plane to your scene.

Getting Started - Chapter 2 - Sound

Continue your Babylon.js learning by adding sound to your scene.

Getting Started - Chapter 2 - Mesh Placement

Continue your Babylon.js learning by placing and positioning meshes in your scene.

Getting Started - Chapter 2 - Basic House

Continue your Babylon.js learning by adding a new mesh type to your scene.

Getting Started - Chapter 2 - Texture

Continue your Babylon.js learning by adding materials to the objects in your scene.

Getting Started - Chapter 2 - Face Materials

Continue your Babylon.js learning by adding materials to individual faces of the meshes in your scene.

Getting Started - Chapter 2 - Combining Meshes

Continue your Babylon.js learning by combining meshes in your scene.

Getting Started - Chapter 2 - Making Copies

Continue your Babylon.js learning by making copies of meshes.

Getting Started - Chapter 2 - The Viewer

Continue your Babylon.js learning by using the Babylon.js viewer to view a model.

Getting Started - Chapter 2 - Web App Layout

Continue your Babylon.js learning by transforming your progress into a web app.