<sk-plane>

← prev index next →

Draws a flat rectangle — the workhorse surface — oriented perpendicular to any axis, for grounds, walls, and displacement fields.

JavaScript API: Plane

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 floor, a backdrop wall, or a subdividable sheet to deform.

Key attributes. width and height are the two in-plane dimensions and are both animatable — a plane can stretch or grow. They are named orientation-relative, so they read correctly whatever the orientation: that attribute picks which axis the plane faces (+x, -x, +y, -y, +z, -z), so a +y plane is a ground and a +z plane is a wall. width-segments and height-segments subdivide each axis — raise them to give wave or deformation effects a grid to bend. Because a plane is flat it is double-sided by default (cull-mode="none"), so it shows from both faces.

Related. Give it appearance with a sk-surface-paint (fills the face) or an sk-edge-paint (draws the wireframe), each naming a sk-plain-material. It sits alongside the other flat and boxy primitives — sk-disc, sk-cube — 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.
widthanimatable <number> 2 Width along the first in-plane axis. Extends from -1 to +1.
heightanimatable <number> 2 Height along the second in-plane axis. Extends from -1 to +1.
width-segments <number> 1 Segments along the width axis.
height-segments <number> 1 Segments along the height axis.
orientation <orientation-axis> ("+x" | "-x" | "+y" | "-y" | "+z" | "-z") "+y" Axis perpendicular to the plane.
cull-mode <cull-mode> ("front" | "back" | "none") — Default face culling mode for surface paints.
include-quad-diagonals <boolean> false Whether to include quad diagonal edges in wireframe rendering.

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