<sk-cloner>

← prev index next →

Stamps copies of its content across a set of points — the way to place many instances (a grid of spheres, particles over a mesh's surface) without authoring each one by hand.

JavaScript API: Cloner

Remarks

The cloner is a SceneNode that instances geometry on the GPU: it takes what to clone from its content children (any clonable node — a mesh, a spline) and where to place them from a points-source. One points-source and one small template become thousands of positioned copies, and when the points-source changes the clones follow automatically.

Key attributes. mode chooses how clones are drawn: object renders each as a full instance (its own transform, pickable), vertex merges them into one particle-like batch that is cheaper at high counts. clone-scale uniformly resizes every clone. align-to-normal orients clones to the source surface's normal (with alignment-axis selecting which local axis points along it) — useful for studding a surface. illumination-min-scale / illumination-max-scale size clones by how much light they receive.

Related. The points-source child decides the layout: sk-grid-points-source for a lattice, sk-mesh-vertex-points-source to sit on a mesh's vertices, and the other *-points-source shapes. To drive each clone individually on the GPU (push them from a point, weight them by a field) add a sk-simple-point-constraint — the per-clone counterpart to the single-node constraints.

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.

Attributes

AttributeTypeDefaultDescription
id <id> — The element's unique identifier — the standard HTML global id attribute.
draggable <boolean> false Gets whether this node can be dragged.
xanimatable <number> 0 X position.
yanimatable <number> 0 Y position.
zanimatable <number> 0 Z position.
hanimatable <angle> 0 Heading (Y-axis rotation) in radians.
panimatable <angle> 0 Pitch (X-axis rotation) in radians.
banimatable <angle> 0 Bank (Z-axis rotation) in radians.
quaternionanimatable <quaternion> ({ <number>, <number>, <number>, <number> }) — Rotation as quaternion (overrides h, p, b if provided)
sxanimatable <number> 1 X-axis scale factor.
syanimatable <number> 1 Y-axis scale factor.
szanimatable <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 cloner's entire rendered output (all clones) renders as
overlay-occluded-opacity <number> 0.3 Alpha multiplier for overlay fragments occluded by scene geometry.
cast-shadow <boolean> true Gets whether this cloner's instances cast shadows.
mode <cloner-mode> ("object" | "vertex") — Cloning operation mode.
align-to-normal <boolean> — Whether to orient clones to align with point normals.
alignment-axis <orientation-axis> ("+x" | "-x" | "+y" | "-y" | "+z" | "-z") — Which local axis of the cloned content aligns with the normal direction.
apply-scale <boolean> — Whether to apply each point's per-clone scale (the source localMatrix's
clone-scaleanimatable <number> — Uniform scale factor applied to each clone.
illumination-enabled <boolean> false Whether illumination-based scaling is enabled.
illumination-min-scaleanimatable <number> — Minimum scale factor for illumination-based scaling.
illumination-max-scaleanimatable <number> — Maximum scale factor for illumination-based scaling.
illumination-use-shadows <boolean> false Whether to use shadow map for illumination visibility calculations.

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

Children

One or more clonable children defining the content to instance — meshes (sphere/cube/cylinder/etc.), splines, SceneNode groups (all descendants cloned together as one template unit), or nested cloners; multiple direct children alternate across points. Plus zero or more point-source / point-constraint / field-constraint children to place the clones. Point constraints also attach to mesh vertices and spline polyline vertices, not only cloners (Issues #2495, #2513).

↑ Documentation home · ← All elements