`<sk-uv-sphere-points-source>`

← prev index next →

Scatters clones over a latitude/longitude sphere — the way to array copies on a ball in regular rings, or over just its top hemisphere for a dome.

JavaScript API: UVSpherePointsSource

Remarks

This is the UV-sphere 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 sphere costs the same handful of parameters as a coarse one.

Key attributes. radius sets the sphere's size. lat-segments sets how many horizontal rings run from pole to pole (the vertical resolution) and lon-segments how many points sit around each ring (how many meridians) — together they lay down the regular grid of parallels and meridians that distinguishes this from the sk-sphere-points-source spiral. hemisphere keeps only the top half, giving a dome instead of a full ball. center offsets the sphere from the origin. Points are emitted once each — a single pole point, no seam duplicates.

Related. For the most even full-sphere coverage (no pole crowding) use sk-sphere-points-source; for a geodesic subdivision use sk-platonic-sphere-points-source. Related closed surfaces include sk-capsule-points-source and sk-torus-points-source. To scatter over an arbitrary object's surface rather than an analytic sphere, 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 on a latitude/longitude ball. lat-segments="16" stacks 16
     horizontal rings pole to pole and lon-segments="28" spaces the dots around
     each ring, so the copies read as regular parallels and meridians — a globe
     of points — with the rings crowding visibly toward the poles. Raise the
     segment counts for a finer grid, or add hemisphere="true" to keep only the
     top half as a dome. -->
<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-uv-sphere-points-source radius="3" lat-segments="16" lon-segments="28"></sk-uv-sphere-points-source>

        <!-- Template cloned at each surface point. -->
        <sk-sphere radius="0.16">
            <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
`radius`	`<number>`	`1.0`	Sphere radius.
`lat-segments`	`<number>`	`8`	Number of latitude segments (horizontal divisions).
`lon-segments`	`<number>`	`16`	Number of longitude segments (vertical divisions).
`hemisphere`animatable	`<boolean>`	`false`	Whether to generate only the top hemisphere.
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Sphere center position.

↑ Documentation home · ← All elements