Creating A Tiled Box
Tiled Box
A tiled box is only available with MeshBuilder. A tiled box is constructed from six tiled planes s o that he tile 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 |
The values for the options pattern property are the following constants
BABYLON.Mesh.NO_FLIP, defaultBABYLON.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, defaultBABYLON.Mesh.TOP,BABYLON.Mesh.BOTTOM
BABYLON.Mesh.CENTER, defaultBABYLON.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