Spline

A spline you place directly in the scene and give any spline-source as its geometry — the general-purpose way to draw a curve when you need a source that the convenience leaves cannot build (GPU, morphing, or a moving node's trail).

Declarative element: <sk-spline>

Global: available as sk.Spline inside a scene <script>.

Remarks

This is the source-host member of the AbstractSpline family: it is a spline you position, transform and paint like any other, but it owns no geometry of its own — it draws whichever spline-source you give it. The source arrives as the single geometry child (<sk-svg-spline-source>, <sk-points-spline-source>, <sk-morph-spline-source>, <sk-compute-buffer-spline-source>, <sk-custom-wgsl-spline-source>, or <sk-trail-spline-source>); a stroke paint child then renders the resulting curve as a ribbon. Sources compose — a sk-morph-spline-source blends two other sources, recursively.

Key attributes. Like every spline this leaf has no geometry attributes of its own — the curve comes entirely from its spline-source child. What it does carry are the standard node controls: the transform (x/y/z, h/p/b, sx/sy/sz/s) positions and orients the whole curve in the scene, id lets an sk-align-to-spline-constraint reference it by #id, and cast-shadow toggles whether the drawn ribbon casts a shadow.

Related. For the two everyday input modalities, the convenience leaves build the source themselves and expose its parameters as their own attributes: sk-path-spline (SVG path data) and sk-points-spline (control points). This source-hosting spline is the choice when the curve needs a source those leaves cannot produce. The full geometry-provider set is the spline-source family — sk-svg-spline-source, sk-points-spline-source, sk-morph-spline-source, sk-trail-spline-source, and the GPU sources sk-compute-buffer-spline-source / sk-custom-wgsl-spline-source. The base concept is AbstractSpline.

Constructor

constructor(config?: { overlay?: boolean; overlayOccludedOpacity?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: AbstractSpline, RenderableNode, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

// Direct source — the canonical strategy entry point
const source = new SVGSplineSource({ path: 'M 0 0 L 10 10', coordinateSpace: 'x-z' });
const spline = new Spline({ id: 'direct', source });
spline.source = new MorphSplineSource({ source, target: otherSource }); // sources compose

Used in guides: Scene basics

↑ Documentation home · ← All classes