

## Box Mesh
The created box has its origin at the center of the box, its width (x), height (y) and depth (z) are as given.
## MeshBuilder.
Usage :
```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", options, scene); //scene is optional and defaults to the current scene
```

options property|value|default value
--------|-----|------------
size|_(number)_ size of each box side|1
height|_(number)_ height size, overwrites _size_ option|size
width|_(number)_ width size, overwrites _size_ option|size
depth|_(number)_ depth size,  overwrites _size_ option|size
faceColors|_(Color4[])_ array of 6 _Color4_, one per box face|Color4(1, 1, 1, 1) for each side
faceUV|_(Vector4[])_ array of 6 _Vector4_, one per box face| UVs(0, 0, 1, 1) for each side
wrap|_(boolean)_ ( BJS 4.0 or >) when true all vertical sides (0, 1, 2, 3) will apply image textures upright | false
topBaseAt|_(number)_ (BJS 4.0 or >) base of top touches side given 0, 1, 2, 3| 1
bottomBaseAt|_(number)_ (BJS 4.0 or >) base of bottom touches side given 0, 1, 2, 3| 0
updatable|_(boolean)_ true if the mesh is updatable|false
sideOrientation|_(number)_ side orientation|DEFAULTSIDE
frontUVs|_(Vector4)_  **ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE set** | Vector4(0,0, 1,1) 
backUVs|_(Vector4)_  **ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE set** | Vector4(0,0, 1,1) 


### Examples
Cuboid: <Playground id="#6XIT28#4" title="Create a Cuboid" description="Simple example of creating a cuboid." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes1.jpg"/> 
Face numbers, face 0 is on the positive z axis: <Playground id="#6XIT28#5" title="Create a Box With Face Numbers" description="Simple example of creating a box with face numbers." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes2.jpg"/>

## Mesh.
Usage
```javascript
const box = BABYLON.Mesh.CreateBox("box", size, scene);
const box = BABYLON.Mesh.CreateBox("box", size, scene, updatable, sideOrientation); //optional parameters after scene
```
It is only possible to create a cube with this method, for a cuboid you need to use scaling.




## Tiled Box
A tiled box is only available with *MeshBuilder*. A tiled box is constructed from six tiled planes so that the size, pattern and alignment of tiles will be the same for each face. Using the faceUV array each side can have a different texture for its tiles as [explained](/features/featuresDeepDive/materials/using/texturePerBoxFace) for a standard box.

## MeshBuilder
Usage :
```javascript
const tiledBox = BABYLON.MeshBuilder.CreateTiledBox("tiled box", options, scene); //scene is optional and defaults to the current scene
```

option|value|default value
--------|-----|------------
size|_(number)_ size of each box side|1
height|_(number)_ height size, overwrites _size_ option|size
width|_(number)_ width size, overwrites _size_ option|size
depth|_(number)_ depth size,  overwrites _size_ option|size
tileSize|_(number)_ size of each tile side|1
tileHeight|_(number)_ tile height size, overwrites _tileSize_ option|tileSize
tileWidth|_(number)_ tile width size, overwrites _tileSize_ option|tileSize
faceColors|_(Color4[])_ array of 6 _Color4_, one per box face|Color4(1, 1, 1, 1) for each side
faceUV|_(Vector4[])_ array of 6 _Vector4_, one per box face| UVs(0, 0, 1, 1) for each side
pattern|_(number)_ how tiles are reflected or rotatedacross a face|NO_FLIP
alignVertical| _(number)_ positions whole tiles at top, bottom or center of a face|CENTER
alignHorizontal| _(number)_ positions whole tiles at left, right or center of a face|CENTER
updatable|_(boolean)_ true if the mesh is updatable|false
sideOrientation|_(number)_ side orientation|DEFAULTSIDE 

<Playground id="#FAP6ZC#3" title="Create a Tiled Box" description="Simple example of creating a tiled box." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes3.jpg"/>

The values for the options *pattern* property are the following constants

```javascript
BABYLON.Mesh.NO_FLIP, default
BABYLON.Mesh.FLIP_TILE,
BABYLON.Mesh.ROTATE_TILE,
BABYLON.Mesh.FLIP_ROW,
BABYLON.Mesh.ROTATE_ROW,
BABYLON.Mesh.FLIP_N_ROTATE_TILE,
BABYLON.Mesh.FLIP_N_ROTATE_ROW
```

The TILE ending means that every other tile across and up the plane is flipped or rotated.  
The ROW ending means that the whole of alternate rows are flipped or rotated.

When the width or height of the plane is such that a whole number of tiles does not fit then tiles are 'cut' and part tiles are used to fill the plane. When this happens you can arrange where the part tiles are placed, either at one edge of the plane or uniformly on two opposite edges. You do this by setting *alignVertical* and *alignHorizontal* in the options with where you want whole tiles to be placed. For example setting *alignHorizontal* to *LEFT* means that the leftmost column of tiles will be whole ones and part tiles will be in the rightmost column. The following constants are available for *alignVertical* and *alignHorizontal*

```javascript
BABYLON.Mesh.CENTER, default
BABYLON.Mesh.TOP,
BABYLON.Mesh.BOTTOM
```

```javascript
BABYLON.Mesh.CENTER, default
BABYLON.Mesh.LEFT,
BABYLON.Mesh.RIGHT
```

There are 7 * 3 * 3 = 63 different arrangements for the tiles.

## Examples
We use the following image as the texture in the following examples

![Arrow Pattern](/img/how_to/mesh/tiles6.jpg)  

Different texture each side, tile width 1, tile height 1 
Playground Example -  <Playground id="#FAP6ZC#4" title="Create a Tiled Box With Different Face Textures" description="Simple example of creating a tiled box with different textures on each side." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes4.jpg"/>


All the 63 arrangements. To see the headings view the full playground.
<Playground id="#FAP6ZC#2" title="Create a Tiled Box With 63 Different Arrangements" description="Simple example of creating a tiled box with 63 different arrangements." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes4.jpg"/>


## Common 3D Shapes
These common shapes cover 2D shapes such as horizontal planes (ground), vertical planes and regular polygons along with 3D shapes such as cuboids, spheres, ellipsoids and toruses. 

To create these meshes you use
```javascript
const mesh = BABYLON.MeshBuilder.Create<MeshType>(name, options, scene);
```
where the *options* object properties vary according to the type of mesh. Using an empty object, {}, the meshes will default to given sizes, usually unit ones. The scene parameter is optional and defaults to the current scene.

Two useful properties are *updatable* and *instance*. When a parametric mesh is created with its options property *updatable* set to true then you can change the values within the shape defining properties and re-render the mesh with these new values by using the *instance* property as the following line drawing example indicates.


```javascript
//creates lines using the vector3 myPoints array
const myLines = BABYLON.MeshBuilder.CreateLines("lines", {points: myPoints});
// update some or all values in myPoints array
myPoints[1] = new BABYLON.Vector3(1, 2, 3);
// updates the existing instance of myLines by pointing the instance property to it
myLines = BABYLON.MeshBuilder.CreateLines("lines", {points: myArray, instance: myLines});
```

Whilst you can change values within a property you cannot the number of elements of the property. All the parametric meshes, except for the Lathe,  CreatePolygon and ExtendPolygon can have their shape updated in this way.

It is still possible to use the form

```javascript
const mesh = BABYLON.Mesh.Create<MeshType>(name, required_param1, required_param2, ..., scene, optional_parameter1, ........);
```
The scene parameter is compulsory when used with optional parameters. You will still find this method in playgrounds.
 


options property	value	default value
options property size	value (number) size of each box side	default value 1
options property height	value (number) height size, overwrites size option	default value size
options property width	value (number) width size, overwrites size option	default value size
options property depth	value (number) depth size, overwrites size option	default value size
options property faceColors	value (Color4[]) array of 6 Color4, one per box face	default value Color4(1, 1, 1, 1) for each side
options property faceUV	value (Vector4[]) array of 6 Vector4, one per box face	default value UVs(0, 0, 1, 1) for each side
options property wrap	value (boolean) ( BJS 4.0 or >) when true all vertical sides (0, 1, 2, 3) will apply image textures upright	default value false
options property topBaseAt	value (number) (BJS 4.0 or >) base of top touches side given 0, 1, 2, 3	default value 1
options property bottomBaseAt	value (number) (BJS 4.0 or >) base of bottom touches side given 0, 1, 2, 3	default value 0
options property updatable	value (boolean) true if the mesh is updatable	default value false
options property sideOrientation	value (number) side orientation	default value DEFAULTSIDE
options property frontUVs	value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE set	default value Vector4(0,0, 1,1)
options property backUVs	value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE set	default value Vector4(0,0, 1,1)

Creating A Box

Box Mesh

MeshBuilder.

Examples

Mesh.