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, 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.

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 width 
const b = new BABYLON.Vector4(0,0, 0.5, 1); // back image = second half along the width

const 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 Back

The 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