`<sk-torus-points-source>`

← prev index next →

Scatters clones over the surface of a torus — the way to array copies around a donut, wrapping both the big ring and the tube.

JavaScript API: TorusPointsSource

Remarks

This is the torus-surface member of the points-source family: a points-source defines the set of positions at which a sk-cloner places copies of its content, so it lives as a child of a <sk-cloner> and the cloner's other child is the template that gets cloned at each point. Because the positions are generated procedurally in the shader (see ShaderFunctionPointsSource), a finely subdivided torus costs the same handful of parameters as a coarse one.

Key attributes. major-radius is the distance from the torus centre to the middle of the tube (how big the donut is), and minor-radius is the radius of the tube itself (how thick it is) — a small minor-radius gives a thin hoop, a large one a fat ring. major-segments sets how many points go around the big ring and minor-segments how many go around the tube's cross-section; together they set the surface density. orientation is the axis the ring lies flat against — the axis through the hole, one of +x, -x, +y, -y, +z, -z. center offsets the torus from the origin.

Related. For a straight capped tube use sk-capsule-points-source or sk-cone-points-source; for a flat ring with a hole (no tube) use sk-disc-points-source. Other closed surfaces include sk-sphere-points-source and sk-cube-points-source. To scatter over an arbitrary object's surface rather than an analytic torus, see sk-mesh-surface-points-source. Its host is always 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.

<!-- Small spheres wrapping a donut. major-radius="2" sets the ring size and
     minor-radius="0.6" the tube thickness; major-segments="24" spaces 24 rings
     of dots around the big loop and minor-segments="12" wraps 12 around each
     tube cross-section, so the copies trace a hollow torus. Shrink minor-radius
     for a thinner hoop, or raise the segment counts for a denser surface. -->
<sk-scene>
    <sk-directional-light p="55deg" h="30deg" intensity="1.0"></sk-directional-light>
    <sk-ambient-light intensity="0.45"></sk-ambient-light>

    <sk-plain-material id="mat" base-color="#4f86c6"></sk-plain-material>

    <sk-cloner mode="vertex">
        <sk-torus-points-source major-radius="2" minor-radius="0.6"
            major-segments="24" minor-segments="12"></sk-torus-points-source>

        <!-- Template cloned at each surface point. -->
        <sk-sphere radius="0.14">
            <sk-surface-paint material="#mat"></sk-surface-paint>
        </sk-sphere>
    </sk-cloner>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`major-radius`	`<number>`	`1.0`	Major radius: distance from torus center to tube center.
`minor-radius`	`<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`animatable	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis perpendicular to the torus plane.
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Center position of the torus.

↑ Documentation home · ← All elements