Skip to main content

A canvas box is a group of BoxLayers that are rendered as a single mesh. Each box layer is a group of six canvases that are also rendered as a single mesh. You can then paint on each canvas individually by calling box.paint().

Example

const box = new VOXELIZE.CanvasBox();

box.paint("all", (ctx, canvas) => {
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
});

Bobby from King of the Hill

Hierarchy​

  • Group

    ↳ CanvasBox

    ↳↳ Sky

Constructors​

constructor​

• new CanvasBox(options?): CanvasBox

Create a new canvas box.

Parameters​

NameTypeDescription
optionsPartial<CanvasBoxOptions>The options for creating a canvas box.

Returns​

CanvasBox

Overrides​

Group.constructor

Properties​

boxLayers​

• boxLayers: BoxLayer[] = []

The inner layers of the canvas box.

depth​

• depth: number

The depth of the canvas box.

height​

• height: number

The height of the canvas box.

options​

• options: CanvasBoxOptions

Parameters for creating a canvas box.

width​

• width: number

The width of the canvas box.

Accessors​

boxMaterials​

• get boxMaterials(): Map<string, MeshBasicMaterial>

The first layer of the canvas box.

Returns​

Map<string, MeshBasicMaterial>

Methods​

paint​

▸ paint(side, art, layer?): void

Add art to the canvas(s) of this box layer.

Parameters​

NameTypeDefault valueDescription
sideBoxSides | BoxSides[]undefinedThe side(s) of the box layer to draw on.
artColor | Texture | ArtFunctionundefinedThe art or art function to draw on the box layer's side.
layernumber0The layer to draw on.

Returns​

void