Skip to content

Shape

Every shape takes the shared props below plus its own size props. Every numeric prop accepts a plain number or an animated value.

PropTypeDefaultNotes
positionVec30Object { x, y, z }, tuple [x, y, z], partial object, or one number for all three
rotationVec30Same forms; degrees
colorstringwhiteHex #rrggbb or #rrggbbaa
opacitynumber0.9
materialMateriallambert, ambient: 0.2See Materials
onClick(shape, event) => void
onPointerOver(shape) => void
onPointerOut(shape) => void

outline and glow are not props. They come from an enclosing <Effect> — see Composers.

height is the full height unless noted. roundness rounds edges and shrinks the shape by the same amount; only the shapes listed with it have it.

ComponentSize propsNotes
<Box>size, roundnesssize is half-extents per axis; one number for a cube
<BoxFrame>size, edgeWireframe box; edge is the bar thickness
<Sphere>radius, roundness
<Ellipsoid>sizeThree radii
<Octahedron>sizeVertex distance from centre
<Cylinder>radius, height
<RoundedCylinder>radius, height, roundness
<HexPrism>radius, height
<TriPrism>radius, heightApproximate distance
<Plane>size, roundnessA thin rounded rectangle
<Rhombus>lengthA, lengthB, height, roundnessHalf-diagonals
<Pyramid>base, heightSquare base half-extent
<Cone>radius, height
<CappedCone>radiusBottom, radiusTop, height
<RoundCone>radiusBottom, radiusTop, heightSpherical ends
<Capsule>radius, height, roundnessheight is the distance between the two sphere centres
<Torus>radius, thickness, open, capAngle, roundnessradius is the ring, thickness the tube; open with capAngle in degrees draws a partial ring
<Link>radius, thickness, lengthA torus stretched by length
<CutSphere>radius, cutHeight
<CutHollowSphere>radius, cutHeight, thickness
<DeathStar>radius, biteRadius, biteOffset
<SolidAngle>angle, radiusCone-shaped slice of a sphere; angle in radians
<Circle2D>radiusFlat — pair with <Extrude> or <Revolve>
<Rect2D>sizeFlat
<RoundedRect2D>size, roundnessFlat

Each component maps its own props into the engine’s fixed record — three size floats, a rounding float, and a type ID — at registration. <Sphere radius> becomes size.x; <Torus radius thickness capAngle> becomes size.x, size.y and size.z in radians. That mapping, and the shader case that reads it, are the shape’s contract; see Adding a shape.