<sk-cube>

← prev index next →

Draws a box — the simplest solid — from a uniform cube to any rectangular prism, with each face independently subdividable.

JavaScript API: Cube

Remarks

This is a member of the AbstractMeshNode geometry-primitive family: a solid, renderable shape you position, paint, and animate like any scene node. It is the shape to reach for whenever you need a block, a wall panel, or a grid-ready base for deformation.

Key attributes. size sets a uniform edge length on all three axes and is animatable — a cube can pulse or grow; size-x, size-y, and size-z override it per axis to make a rectangular box. segments subdivides every face uniformly, while segments-x, segments-y, and segments-z subdivide per axis — more segments give geometry for wave or deformation effects to bend. include-quad-diagonals toggles the diagonal edges shown in wireframe: leave it off for a clean box wireframe.

Related. Give it appearance with a sk-surface-paint (fills the faces) or an sk-edge-paint (draws the wireframe), each naming a sk-plain-material. It sits alongside the other primitives — sk-sphere, sk-plane — and, like every mesh, can supply clone positions to a sk-cloner.

Serve these docs to run the live example. WebGPU needs a secure context — open this page via grunt serve rather than double-clicking the file. The Markup tab works from disk.

Attributes

AttributeTypeDefaultDescription
id <id> — The element's unique identifier — the standard HTML global id attribute.
draggable <boolean> false Gets whether this node can be dragged.
xanimatable <number> 0 X position.
yanimatable <number> 0 Y position.
zanimatable <number> 0 Z position.
hanimatable <angle> 0 Heading (Y-axis rotation) in radians.
panimatable <angle> 0 Pitch (X-axis rotation) in radians.
banimatable <angle> 0 Bank (Z-axis rotation) in radians.
quaternionanimatable <quaternion> ({ <number>, <number>, <number>, <number> }) — Rotation as quaternion (overrides h, p, b if provided)
sxanimatable <number> 1 X-axis scale factor.
syanimatable <number> 1 Y-axis scale factor.
szanimatable <number> 1 Z-axis scale factor.
s <number> — Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only
overlay <boolean> false Whether this node renders as an overlay with depth-aware translucency.
overlay-occluded-opacity <number> 0.3 Alpha multiplier for overlay fragments occluded by scene geometry.
cast-shadowanimatable <boolean> true Gets whether this mesh casts shadows.
size <number> — Uniform size for all axes (overrides individual size properties if provided) write-only
size-xanimatable <number> 2 Width along the X-axis.
size-yanimatable <number> 2 Height along the Y-axis.
size-zanimatable <number> 2 Depth along the Z-axis.
segments <number> — Uniform number of segments for all axes (overrides individual segment properties if provided) write-only
segments-x <number> 1 Number of segments along the X-axis.
segments-y <number> 1 Number of segments along the Y-axis.
segments-z <number> 1 Number of segments along the Z-axis.
include-quad-diagonals <boolean> false Whether to include quad diagonal edges in wireframe rendering.
cull-mode <cull-mode> ("front" | "back" | "none") — Default face culling mode for surface paints.

Event handler attributes

Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.

onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend

Used in guides: Scene basics

↑ Documentation home · ← All elements