PlanePointsSource

← 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.

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.

Constructor

constructor(config?: { width?: number; height?: number; widthSegments?: number; heightSegments?: number; orientation?: AxisOrientation; center?: [number, number, number] })

Properties

Config Properties

PropertyTypeDefaultDescriptionDeclared by
width number 1.0 Plane width along the first in-plane axis (extends from -width/2 to +width/2). PlanePointsSource
height number 1.0 Plane height along the second in-plane axis (extends from -height/2 to +height/2). PlanePointsSource
widthSegments number 1 Number of segments along the width axis. PlanePointsSource
heightSegments number 1 Number of segments along the height axis. PlanePointsSource
orientationanimatable AxisOrientation "+y" Axis perpendicular to the plane. PlanePointsSource
center [number, number, number] [0, 0, 0] Plane center position. PlanePointsSource

Other Properties

PropertyTypeDefaultDescriptionDeclared by
pointCountread-only number Number of points provided by this source. ShaderFunctionPointsSource
localMatricesread-only Float32Array<ArrayBufferLike> | null CPU-side local matrices. ShaderFunctionPointsSource
typeread-only PointsSourceType "shader-function" The type of this points source. ShaderFunctionPointsSource
sceneread-only any Gets the Scene this animatable belongs to, if any. SkenraAnimatable
animationsread-only SkenraAnimation[] Public getter for the animations affecting this target. SkenraAnimatable

Methods

MethodDescriptionDeclared by
getBoundsInSpace(fullTransform: Float32Array): { minX: number; maxX: number; minY: number; maxY: number; minZ: number; maxZ: number; } | null Computes the AABB in target space by transforming local bounds corners. ShaderFunctionPointsSource
setWorldReferenceNode(node: WorldReferenceNode | null): void Sets the reference node whose world matrix should be used for transforms. ShaderFunctionPointsSource
animate(firstArg: TypedKeyframe<this>[] | TypedPropertyIndexedKeyframes<this> | Record<string, any> | globalThis.Keyframe[] | globalThis.PropertyIndexedKeyframes | null, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation Creates a new SkenraAnimation for this target per Web Animations API. SkenraAnimatable
removeAnimation(animation: SkenraAnimation): boolean Removes a specific animation from this object. SkenraAnimatable
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] Creates a constraint on this Animatable using a fluent API. SkenraAnimatable

Example

// Create a rectangular ground plane with 20x10 grid of points
const planeSource = new PlanePointsSource({
    width: 20,
    height: 10,
    widthSegments: 19, // 20 points along width
    heightSegments: 9, // 10 points along height
    orientation: '+y'
});

const cloner = new Cloner({ id: 'ground-cloner',
    pointsSource: planeSource,
    alignToNormal: true // All clones point upward
});
cloner.appendChild(grassBladeNode);