
## Box

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) apply image textures upright     | false                            |
| topBaseAt        | _(number)_ (BJS 4.0 or >) the base of the top touches the side given by 0, 1, 2, or 3                  | 1                                |
| bottomBaseAt     | _(number)_ (BJS 4.0 or >) the base of the bottom touches the side given by 0, 1, 2, or 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.webp"/>
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.webp"/>

## Mesh

Usage

```javascript
const box = BABYLON.MeshBuilder.CreateBox("box", { size, updatable, sideOrientation}, 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*. It is constructed from six tiled planes so that the size, pattern, and alignment of the tiles are 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 rotated across 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.webp"/>

The values for the *pattern* option 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, tiles are "cut" and partial tiles are used to fill the plane. When this happens, you can arrange where the partial 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 to indicate where you want the whole tiles to be placed. For example, setting *alignHorizontal* to *LEFT* means that the leftmost column of tiles will be whole tiles and the rightmost column will contain partial tiles. 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 examples below.

![Arrow Pattern](/img/how_to/mesh/tiles6.webp)  

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.webp"/>


All 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.webp"/>


## 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, {}, makes the meshes default to preset 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 *updatable* option set to true, you can change the values within the shape-defining properties and re-render the mesh with those new values by using the *instance* property, as the following line-drawing example shows.


```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});
```

While you can change values within a property, you cannot change the number of elements in that 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 required when optional parameters are used. You will still find this method in playgrounds.
 


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) apply image textures upright	false
topBaseAt	(number) (BJS 4.0 or >) the base of the top touches the side given by 0, 1, 2, or 3	1
bottomBaseAt	(number) (BJS 4.0 or >) the base of the bottom touches the side given by 0, 1, 2, or 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)

Creating A Box

Box

MeshBuilder

Examples

Mesh