`<sk-torus>`

Draws a torus — a ring or donut — set by a ring radius and a tube radius, for O-rings, tires, and orbit bands.

JavaScript API: Torus

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 ring, a tire, or a circular band.

Key attributes. A torus is set by two radii, both animatable: major-radius is the ring's distance from center (how big the loop is) and minor-radius is the tube's thickness (how fat it is) — so a thin minor-radius reads as jewelry and a thick one as a tire. orientation (+x, -x, +y, -y, +z, -z) picks the axis the ring lies perpendicular to. major-segments tessellates around the ring and minor-segments around the tube — 24 and 16 respectively give a smooth surface. 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 sits alongside the other round primitives — sk-cylinder, sk-disc — 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 tori showing what you control. LEFT: minor-radius ANIMATES 0.1 -> 0.5
     and back, so the tube swells from a thin O-ring to a fat tire live. MIDDLE:
     the default torus drawn as a wireframe, so the ring/tube segment grid reads.
     RIGHT: a large thin ring, showing a big major-radius with a slender tube. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>

    <!-- minor-radius is animatable: the tube swells -->
    <sk-torus x="-3.2" major-radius="1" minor-radius="0.3" major-segments="32" minor-segments="16">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" minor-radius="0.1"></sk-keyframe>
            <sk-keyframe offset="1" minor-radius="0.5"></sk-keyframe>
        </sk-animation>
    </sk-torus>

    <!-- default torus, wireframe so the ring/tube grid reads -->
    <sk-torus major-radius="1" minor-radius="0.3" major-segments="16" minor-segments="10">
        <sk-edge-paint material="#wire"></sk-edge-paint>
    </sk-torus>

    <!-- large thin ring (jewelry / O-ring) -->
    <sk-torus x="3.4" major-radius="1.4" minor-radius="0.08" major-segments="48" minor-segments="12">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-torus>
</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.
`major-radius`animatable	`<number>`	`1`	Major radius: distance from torus center to tube center.
`minor-radius`animatable	`<number>`	`0.3`	Minor radius: radius of the tube cross-section.
`major-segments`	`<number>`	`16`	Number of segments around the major circle/ring.
`minor-segments`	`<number>`	`12`	Number of segments around the minor circle/tube.
`orientation`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis perpendicular to the torus plane.
`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