Creating A Tiled Box
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 for a standard box.
MeshBuilder
Usage :
import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder";const tiledBox = 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 |
The values for the pattern option are the following constants:
import { Mesh } from "@babylonjs/core/Meshes/mesh";Mesh.NO_FLIP, defaultMesh.FLIP_TILE,Mesh.ROTATE_TILE,Mesh.FLIP_ROW,Mesh.ROTATE_ROW,Mesh.FLIP_N_ROTATE_TILE,Mesh.FLIP_N_ROTATE_ROWThe 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:
import { Mesh } from "@babylonjs/core/Meshes/mesh";Mesh.CENTER, defaultMesh.TOP,Mesh.BOTTOMimport { Mesh } from "@babylonjs/core/Meshes/mesh";Mesh.CENTER, defaultMesh.LEFT,Mesh.RIGHTThere are 7 * 3 * 3 = 63 different arrangements for the tiles.
Examples
We use the following image as the texture in the examples below.
Different texture each side, tile width 1, tile height 1 Playground Example - Create a Tiled Box With Different Face Textures
All 63 arrangements. To see the headings, view the full playground.
Create a Tiled Box With 63 Different Arrangements