
## Sphere

The created sphere has its origin at the center of the sphere. By using different values for _diameterX_, _diameterY_ and diameterZ\_ lead you create an ellipsoid.

## MeshBuilder

Example :

```javascript
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", options, scene); //scene is optional and defaults to the current scene
```

| option          | value                                                                 | default value      |
| --------------- | --------------------------------------------------------------------- | ------------------ |
| segments        | _(number)_ number of horizontal segments                              | 32                 |
| diameter        | _(number)_ diameter of the sphere                                     | 1                  |
| diameterX       | _(number)_ diameter on X axis, overwrites _diameter_ option           | diameter           |
| diameterY       | _(number)_ diameter on Y axis, overwrites _diameter_ option           | diameter           |
| diameterZ       | _(number)_ diameter on Z axis, overwrites _diameter_ option           | diameter           |
| arc             | _(number)_ ratio of the circumference (latitude) between 0 and 1      | 1                  |
| slice           | _(number)_ ratio of the height (longitude) between 0 and 1            | 1                  |
| 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

<Playground id="#WIR77Z" title="Create a Sphere" description="Simple example of creating a sphere." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes6.jpg" isMain={true} category="Mesh"/>

<Playground id="#WIR77Z#1" title="Create a Ellipsoid" description="Simple example of creating a ellipsoid." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes7.jpg"/>

<Playground id="#WIR77Z#2" title="Create an Arc" description="Simple example of creating an arc." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes8.jpg"/>

<Playground id="#WIR77Z#3" title="Create an Arc and Slice" description="Simple example of creating an arc and slice." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes9.jpg"/>

## Mesh

Usage :

```javascript
const sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { segments, diameter }, scene);
```

It is only possible to create a sphere with this method, for an ellipsoid you need to use scaling.



## Cylinder or Cone
The created cylinder has its flat sides parallel to the xz plane with its origin at the center of the vertical line of symmetry. If you set _diameterTop_ to zero, you get a cone instead of a cylinder, with different values for _diameterTop_ and _diameterBottom_ you get a truncated cone.
## MeshBuilder
Usage :
```javascript
const cone = BABYLON.MeshBuilder.CreateCylinder("cone", options, scene); //scene is optional and defaults to the current scene
```

option|value|default value
--------|-----|-------------
height|_(number)_ height of the cylinder|2
diameterTop|_(number)_ diameter of the top cap, can be zero to create a cone, overwrites the _diameter_ option|1
diameterBottom|_(number)_ diameter of the bottom cap, can't be zero, overwrites the _diameter_ option|1
diameter|_(number)_ diameter of both caps|1
tessellation|_(number)_ number of radial sides|24
subdivisions|_(number)_ number of rings|1
faceColors|_(Color4[])_ array of 3 _Color4_, 0 : bottom cap, 1 : cylinder tube, 2 : top cap|Color4(1, 1, 1, 1) for each face
faceUV|_(Vector4[])_ array of 3 _Vector4_, 0 : bottom cap, 1 : cylinder tube, 2 : top cap| UVs(0, 0, 1, 1) for each face
arc|_(number)_ ratio of the circumference between 0 and 1|1
hasRings|_(boolean)_ makes the subdivisions independent from each other, so they become different faces|false
enclose|_(boolean)_ adds two extra faces per subdivision to a sliced cylinder to close it around its height axis|false
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
Cylinder: <Playground id="#QANVC6" title="Create a Cylinder" description="Simple example of creating a cylinder."/>

Cone: <Playground id="#QANVC6#1" title="Create a Cone" description="Simple example of creating a cone."/>

Triangular Prism: <Playground id="#QANVC6#2" title="Create a Triangular Prism" description="Simple example of creating a triangular prism."/>

Arc <Playground id="#QANVC6#3" title="Create an Arc" description="Simple example of creating an arc."/>

Cake Slice: <Playground id="#QANVC6#2240" title="Create a Cake Slice" description="Simple example of creating a cake slice."/>

![can label and top](/img/how_to/apply-material-to-faces/logo_label.jpg)

Cylinder with faceUVs <Playground id="#QANVC6#4" title="Create a Cylinder With Face UVs" description="Simple example of creating a cylinder with face UVs."/>

## Mesh
Usage :
```javascript
const cylinder = BABYLON.MeshBuilder.CreateCylinder("cylinder", {height, diameterTop, diameterBottom, tessellation, subdivisions}, scene);
```



## 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"/>