SceneNode

The base concept for the scene graph: the hierarchy of nodes that makes up a scene, each positioned relative to its parent.

Declarative element: <sk-scene-node>

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

Remarks

Every visible and invisible thing in a Skenra scene is a scene node, arranged in a tree under sk-scene. A node carries a transform — position (x/y/z), rotation (h/p/b as heading/pitch/bank angles), and scale (sx/sy/sz, or s for uniform) — and a node's transform is relative to its parent, so moving a group moves everything inside it. These transform attributes are shared by every node type: meshes, splines, lights, cameras, and fields all inherit them.

The family. A plain sk-scene-node is an invisible group used to transform its children together; sk-scene is the root that holds everything; sk-cloner instances its content across a points-source; and sk-orbit and sk-target-at are helper nodes that hold parameters a constraint reads (a pivot to orbit, or a point to look at). Concrete geometry, lights, and cameras are all scene nodes too.

The example groups two spheres under one node and rotates the group as a whole.

Constructor

constructor(config?: { 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: SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

// A group node transforms its children together.
const group = new SceneNode({ id: 'group' });
group.y = 5;
group.h = Math.PI / 4; // heading (Y-axis rotation), in radians

// Two spheres offset within the group's local space.
group.appendChild(new Sphere({ id: 'left', x: -1, radius: 0.5 }));
group.appendChild(new Sphere({ id: 'right', x: 1, radius: 0.5 }));

const scene = new Scene();
scene.appendChild(group);

// Spin the whole group (Web Animations API); both spheres rotate with it.
group.animate([
  { offset: 0, h: 0 },
  { offset: 1, h: Math.PI * 2 }
], { duration: 2000, iterations: Infinity });

// Nodes are DOM-style event targets.
group.addEventListener('pointerdown', () => console.log('group clicked'));

↑ Documentation home · ← All classes