Creating A Tiled Box

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 for a standard box.

MeshBuilder

Usage :

const tiledBox = BABYLON.MeshBuilder.CreateTiledBox("tiled box", options, scene); //scene is optional and defaults to the current scene

option	value	default value
option size	value (number) size of each box side	default value 1
option height	value (number) height size, overwrites size option	default value size
option width	value (number) width size, overwrites size option	default value size
option depth	value (number) depth size, overwrites size option	default value size
option tileSize	value (number) size of each tile side	default value 1
option tileHeight	value (number) tile height size, overwrites tileSize option	default value tileSize
option tileWidth	value (number) tile width size, overwrites tileSize option	default value tileSize
option faceColors	value (Color4[]) array of 6 Color4, one per box face	default value Color4(1, 1, 1, 1) for each side
option faceUV	value (Vector4[]) array of 6 Vector4, one per box face	default value UVs(0, 0, 1, 1) for each side
option pattern	value (number) how tiles are reflected or rotatedacross a face	default value NO_FLIP
option alignVertical	value (number) positions whole tiles at top, bottom or center of a face	default value CENTER
option alignHorizontal	value (number) positions whole tiles at left, right or center of a face	default value CENTER
option updatable	value (boolean) true if the mesh is updatable	default value false
option sideOrientation	value (number) side orientation	default value DEFAULTSIDE

Create a Tiled Box

The values for the options pattern property are the following constants

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

BABYLON.Mesh.CENTER, default
BABYLON.Mesh.TOP,
BABYLON.Mesh.BOTTOM

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

Different texture each side, tile width 1, tile height 1 Playground Example - Create a Tiled Box With Different Face Textures

All the 63 arrangements. To see the headings view the full playground.

Create a Tiled Box With 63 Different Arrangements