
# Getting Started - Combining Meshes

## Combining Meshes Using Merge Meshes
This is a straightforward 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.webp"/>

![house 5](/img/getstarted/house5.webp)

The first thing we notice is that the whole house is covered by only one of the materials used. Fortunately, this can be corrected using the multiMultiMaterial parameter of *MergeMeshes*. Unfortunately, this is the final parameter in a long list. The code now looks like this:
```javascript
const house = BABYLON.Mesh.MergeMeshes([box, roof], true, false, null, false, true);
```
At this stage, it is important to note that setting the second parameter to `true` disposes of the original meshes, and setting the last parameter to `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.webp"/>

![house 3](/img/getstarted/house3.webp)

Before considering how to make multiple copies of our house we will first: find out the basics of [exporting](/features/featuresDeepDive/Exporters/glTFExporter) our models; how to [import](/features/featuresDeepDive/importers/glTF) models made with Babylon.js or other software; and how to display your scene or models on your own [website](/features/introductionToFeatures/chap2/app2).


# Getting Started - Making Copies

## Copying Meshes
The two main ways to copy a mesh are 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 [meshes feature deep dive](/features/featuresDeepDive/mesh/copies).

To clone the house, use:

```javascript
clonedHouse = house.clone("clonedHouse")
```
And for an instance, it is:
```javascript
instanceHouse = house.createInstance("instanceHouse")
```

Since all the houses in our world will use the same material at this point, 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.webp"/>

We now enlarge the ground and increase the camera radius a little so it can fit several houses and still let us 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 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.webp"/>

![Village 1](/img/getstarted/village1.webp)

As before, to keep the upper parts of the Playground editor available 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.webp"/>

Now that the world we are building is a little more complex, let's take a file of the village and revisit viewing it as part of a website 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.webp"/>






# Getting Started - Face Materials

## Material For Each House Side

One of the option properties for a box is *faceUV*, an array of Vector4s. We can use this to select part of an image and apply it to one face of the box.

In the *faceUV* array, faces are numbered 0 for back, 1 for front, 2 for right, 3 for left, 4 for top, and 5 for bottom.

## Detached House Example
We will start with this image.

![cubehouse texture](/img/getstarted/cubehouse.webp)

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 fractions between 0 and 1.

Rather than using two sets of co-ordinates, we use a four-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 visible, we will just use the defaults.

We set these using
```javascript
const 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.webp"/>

![house 3](/img/getstarted/house3.webp)

## Semi Detached House Example
In this case, the house is twice as wide, and so are the relevant parts of the image.

![semihouse texture](/img/getstarted/semihouse.webp)

The front and back of the house (far left and right of the image) are twice the width of a side (the 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.webp"/>

![house 4](/img/getstarted/house4.webp)

## Moving On

Having created our detached and semi-detached houses, we would like many copies of them to form our world. We could separately copy the boxes and the roofs, but it would be easier to combine a box and roof into one mesh: a house. Before we do this, let's tidy up the code so that we can focus on the new code we are adding. To do this, 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.webp"/>


Getting Started - Chapter 2 - Combining Meshes

Combining Meshes Using Merge Meshes

Further reading

Merging Meshes

Learn how to merge meshes in Babylon.js.