`<sk-disc>`

Draws a flat circle or ring — solid or with a hole punched out — for platforms, halos, and selection indicators.

JavaScript API: Disc

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 circular platform, a halo, a gauge ring, or a flat cap.

Key attributes. outer-radius (animatable) is the circle's size; inner-radius (animatable) punches a hole — inner-radius="0" is a solid disc, and a positive value makes an annulus (ring), so animating it opens and closes the hole. orientation (+x, -x, +y, -y, +z, -z) picks the axis the disc faces (default +y lays it flat). rotation-segments (minimum 3) sets how round the rim is — raise it for a smooth circle; radial-segments subdivides from center to rim for radial gradients or deformation. Because a disc is flat it is double-sided by default (cull-mode="none").

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 is the round counterpart of the flat sk-plane and the flat relative of the sk-torus, 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.

<!-- Three discs showing what you control. LEFT: inner-radius ANIMATES 0 -> 0.8 and
     back, so the shape morphs live between a solid disc and a thin ring. MIDDLE: a
     ring drawn as a wireframe, so the radial and rotation segment grid reads. RIGHT:
     a smooth solid disc with a fine rim. All are double-sided (cull-mode none). -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>

    <!-- inner-radius is animatable: solid disc <-> ring -->
    <sk-disc x="-2.6" inner-radius="0" outer-radius="1" rotation-segments="48" cull-mode="none">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" inner-radius="0"></sk-keyframe>
            <sk-keyframe offset="1" inner-radius="0.8"></sk-keyframe>
        </sk-animation>
    </sk-disc>

    <!-- ring, wireframe so the radial/rotation grid reads -->
    <sk-disc inner-radius="0.5" outer-radius="1" radial-segments="2"
             rotation-segments="24" cull-mode="none">
        <sk-edge-paint material="#wire"></sk-edge-paint>
    </sk-disc>

    <!-- smooth solid disc, fine rim -->
    <sk-disc x="2.6" outer-radius="1" rotation-segments="64" cull-mode="none">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-disc>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`draggable`	`<boolean>`	`false`	Gets whether this node can be dragged.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<angle>`	`0`	Bank (Z-axis rotation) in radians.
`quaternion`animatable	`<quaternion> ({ <number>, <number>, <number>, <number> })`	—	Rotation as quaternion (overrides h, p, b if provided)
`sx`animatable	`<number>`	`1`	X-axis scale factor.
`sy`animatable	`<number>`	`1`	Y-axis scale factor.
`sz`animatable	`<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-shadow`animatable	`<boolean>`	`true`	Gets whether this mesh casts shadows.
`inner-radius`animatable	`<number>`	`0`	Inner radius of the disc. Use 0 for a solid disc.
`outer-radius`animatable	`<number>`	`1`	Outer radius of the disc.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference. Minimum 3.
`radial-segments`	`<number>`	`1`	Number of segments from center to edge.
`orientation`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis perpendicular to the disc plane. See `AxisOrientation` for all valid values.
`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

↑ Documentation home · ← All elements