The base concept for the scene graph: the hierarchy of nodes that makes up a scene, each positioned relative to its parent.
JavaScript API:
SceneNode
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.
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.
<!-- The base transform node. A plain <sk-scene-node> is an invisible group: it has position/rotation/scale and parents children, but no geometry of its own. Concrete nodes (sphere, cube, …) extend it. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<!-- A group that transforms its children together -->
<sk-scene-node y="1" h="30deg">
<sk-sphere x="-1" radius="0.5" segments="6"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
<sk-sphere x="1" radius="0.5" segments="6"><sk-surface-paint material="#mat"></sk-surface-paint></sk-sphere>
</sk-scene-node>
</sk-scene>| Attribute | Type | Default | Description |
|---|---|---|---|
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 |
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