`<sk-cube-points-source>`

← prev index next →

Scatters clones over the six faces of a box — the way to array copies along a cube's or rectangular box's shell rather than through its interior.

JavaScript API: CubePointsSource

Remarks

This is the box-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 box costs the same handful of parameters as the bare eight corners.

Key attributes. size sets a uniform edge length for all three axes; use the per-axis size-x / size-y / size-z instead to make a rectangular box. segments sets how finely each face is subdivided (points land on the cell grid of every face): the default 1 places just the eight corners, while higher values fill each face with a grid; use the per-axis segments-x / segments-y / segments-z to subdivide the axes independently. center offsets the box from the origin. Only the unique surface points are emitted — shared edges and corners are never double-counted.

Related. For a solid volume rather than just the shell use sk-grid-points-source; for a single flat face use sk-plane-points-source. Curved closed surfaces include sk-sphere-points-source, sk-capsule-points-source, and sk-torus-points-source. To scatter over an arbitrary object's surface rather than an analytic box, 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 over the shell of a cube. With segments="3" each face
     carries a 4×4 grid of dots, so the copies trace the outline of a hollow
     box — corners, edges, and face grids — and the interior stays empty.
     Raise segments to pack each face more densely; swap size for size-x /
     size-y / size-z to stretch it into a rectangular box. -->
<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-cube-points-source size="4" segments="3"></sk-cube-points-source>

        <!-- Template cloned at each surface point. -->
        <sk-sphere radius="0.2">
            <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
`size-x`	`<number>`	`2`	Size along the X-axis.
`size-y`	`<number>`	`2`	Size along the Y-axis.
`size-z`	`<number>`	`2`	Size along the Z-axis.
`size`	`<number>`	—	Uniform size for all axes (overrides individual sizes if provided).
`segments-x`	`<number>`	`1`	Number of segments along the X-axis.
`segments-y`	`<number>`	`1`	Number of segments along the Y-axis.
`segments-z`	`<number>`	`1`	Number of segments along the Z-axis.
`segments`	`<number>`	—	Uniform segments for all axes (overrides individual segments if provided).
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Center position of the cube.

↑ Documentation home · ← All elements