`<sk-capsule>`

Draws a capsule — a pill: a cylinder capped by two hemispheres — the smooth-ended alternative to a cylinder.

JavaScript API: Capsule

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 pill, a rounded bar, or a character-style collision volume with no hard edges.

Key attributes. radius (animatable) sets both the tube thickness and the rounded cap size, and height (animatable) is the length of the straight cylindrical middle — so the total length is height + 2 × radius, and stretching height telescopes the pill while radius fattens it. orientation (+x, -x, +y, -y, +z, -z) picks the axis it lies along. rotation-segments (minimum 3) sets the facets around the circumference, cap-segments the rings within each hemisphere, and height-segments the divisions along the middle. include-quad-diagonals toggles the diagonal edges shown in 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 is the round-ended sibling of sk-cylinder and shares its cap curvature with sk-sphere, 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 capsules showing what you control. LEFT: height ANIMATES 0.4 -> 2.4 and
     back, so the straight middle telescopes while the round caps stay put. MIDDLE:
     the default capsule drawn as a wireframe, so the cylinder body and hemispherical
     caps read. RIGHT: the SAME capsule re-oriented to +x — lying down instead of
     standing. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>

    <!-- height is animatable: the pill telescopes -->
    <sk-capsule x="-2.4" radius="0.5" height="1" cap-segments="6" rotation-segments="20">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" height="0.4"></sk-keyframe>
            <sk-keyframe offset="1" height="2.4"></sk-keyframe>
        </sk-animation>
    </sk-capsule>

    <!-- default capsule, wireframe so body and caps read -->
    <sk-capsule radius="0.6" height="1.2" cap-segments="4" rotation-segments="12">
        <sk-edge-paint material="#wire"></sk-edge-paint>
    </sk-capsule>

    <!-- same capsule re-oriented to +x: lying down -->
    <sk-capsule x="2.5" radius="0.35" height="1.6" orientation="+x">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-capsule>
</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.
`radius`animatable	`<number>`	`1`	Radius of the capsule. Must be positive.
`height`animatable	`<number>`	`1`	Height of the cylindrical portion. Must be positive.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference. Minimum 3.
`height-segments`	`<number>`	`1`	Number of segments along the cylinder height. Minimum 1.
`cap-segments`	`<number>`	`4`	Number of latitude segments in each hemisphere cap. Minimum 1.
`orientation`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis along the capsule's length: '+x'\|'-x'\|'+y'\|'-y'\|'+z'\|'-z'.
`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

↑ Documentation home · ← All elements