
# 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 than 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
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.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 - 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](/features/featuresDeepDive/Exporters/glTFExporter) our models; how to [import](/features/featuresDeepDive/importers) models made with Babylon.js or other software; and how to display your scene or models on your own website.


# 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
BABYLON.Color3.Red();
BABYLON.Color3.Green();
BABYLON.Color3.Blue();
BABYLON.Color3.Black();
BABYLON.Color3.White();
BABYLON.Color3.Purple();
BABYLON.Color3.Magenta();
BABYLON.Color3.Yellow();
BABYLON.Color3.Gray();
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 - Chapter 2 - Face Materials

Material For Each House Side

Detached House Example

Semi Detached House Example

Moving On

Further reading

Map Materials to Individual Mesh Faces

Learn how to apply different materials to different faces of a mesh.