
## Sphere

The created sphere has its origin at the center of the sphere. Using different values for _diameterX_, _diameterY_, and _diameterZ_ lets 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.webp" isMain={true} category="Mesh"/>

<Playground id="#WIR77Z#1" title="Create an Ellipsoid" description="Simple example of creating an ellipsoid." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes7.webp"/>

<Playground id="#WIR77Z#2" title="Create an Arc" description="Simple example of creating an arc." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes8.webp"/>

<Playground id="#WIR77Z#3" title="Create an Arc and Slice" description="Simple example of creating an arc and slice." image="/img/playgroundsAndNMEs/divingDeeperMeshSetShapes9.webp"/>

## 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.webp)

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*. 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"/>

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)

Creating A Sphere

Sphere

MeshBuilder

Examples

Mesh