
# 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 green to represent 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, and blue (r, g, b), each from 0 to 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 add some texture to 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 for the image to use. As usual, the scene parameter is optional and defaults 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.webp"/>

![house 2](/img/getstarted/house2.webp)

Having stone walls with no doors or windows is not a very 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 - 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 - 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*. The name might imply a cylinder rather than a prism; however, when using it, you need to state how many points there are 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 need 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.webp"/>

![house 1](/img/getstarted/house1.webp)

The world will be improved with a little color and texture.

Getting Started - Chapter 2 - Texture

Add Texture

Further reading

Materials

Jump into the exciting world of learning Babylon.js materials.