`<sk-plane-points-source>`

← prev index next →

Scatters clones over a rectangular flat panel — the way to array copies in an even grid across a plane, for a field, a floor, or a wall of instances.

JavaScript API: PlanePointsSource

Remarks

This is the flat-panel 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 million-point field costs the same handful of parameters as a small one.

Key attributes. width and height set the panel's two in-plane extents, each spanning symmetrically about the centre. width-segments and height-segments set how finely each axis is subdivided (points land on the cell grid, so more segments mean a denser field). orientation is the axis the panel faces — the axis perpendicular to its plane, one of +x, -x, +y, -y, +z, -z — so +y lays it flat like a floor and +z stands it up like a wall. center offsets the panel from the origin.

Related. For a circular patch use sk-disc-points-source; for a filled 3D volume use sk-grid-points-source, and for the full six-sided shell of a box use sk-cube-points-source. To scatter over an arbitrary object's surface rather than an analytic plane, 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 tiled across a flat panel. width and height set an 8×8 area
     and the segment counts lay a 10×10 grid of dots over it; orientation="+y"
     lays the panel flat like a floor. Change width / height to reshape the
     panel, raise the segment counts for a denser field, or set orientation to
     "+z" to stand it up as a wall. -->
<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-plane-points-source width="8" height="8"
            width-segments="9" height-segments="9" orientation="+y"></sk-plane-points-source>

        <!-- Template cloned at each grid point. -->
        <sk-sphere radius="0.18">
            <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
`width`	`<number>`	`1.0`	Width of the plane along the first in-plane axis (extends from -width/2 to +width/2).
`height`	`<number>`	`1.0`	Height of the plane along the second in-plane axis (extends from -height/2 to +height/2).
`width-segments`	`<number>`	`1`	Number of segments along the width axis.
`height-segments`	`<number>`	`1`	Number of segments along the height axis.
`orientation`animatable	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis perpendicular to the plane.
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Center position of the plane.

↑ Documentation home · ← All elements