Creating A Tiled Plane
Tiled Plane
A tiled plane is only available with MeshBuilder. The tile size, pattern and alignment of tiles can be set.
MeshBuilder
Usage :
const tiledPlane = BABYLON.MeshBuilder.CreateTiledPlane("plane", options, scene); //scene is optional and defaults to the current scene
option | value | default value |
---|---|---|
option size | value (number) side size of the plane | default value 1 |
option width | value (number) size of the width | default value size |
option height | value (number) size of the height | 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 frontUVs | value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE set | default value Vector4(0,0, 1,1) |
option backUVs | value (Vector4) ONLY WHEN sideOrientation:BABYLON.Mesh.DOUBLESIDE set | default value Vector4(0,0, 1,1) |
option pattern | value (number) how tiles are reflected or rotated | 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.
Using the frontUVs and backUVs properties in the options the front and back of the plane can use different parts of an image for the front and back of the plane.
const f = new BABYLON.Vector4(0.5,0, 1, 1); // front image = half the whole image along the widthconst b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the widthconst options = {frontUVs: f,backUVs: b,sideOrientation: BABYLON.Mesh.DOUBLESIDE}
Examples
The following image is used to show the results before and after flipping alternate tiles
Before tiles flipped: Create a Tiled Plane With Before Tiles Flipped After tiles flipped: Create a Tiled Plane With After Tiles Flipped
Alternating Patterns
This image
is used to show different alternating patterns using tiles of width 2 and height 1 by flipping either every other row or tile
Row flipped: Create a Tiled Plane With Row Flipped Tile filed: Create a Tiled Plane With Tile Filed
and also how tiling can be different front and back.
Create a Tiled Plane With Different Tiling Front And BackThe final example use the same image to show all 63 permutations. To see heading view the full playground.
Create a Tiled Plane With 63 Different Permutations