---
contentHash: sha256:6622142fc4741d0ac9a723c3d6483cd788dfcfb27e95e22ef77912f743a621b6
documentId: element:sk-scene-node
kind: element
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# sk-scene-node

<a id="overview"></a>

## Overview

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

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.

<a id="example"></a>

## Example

```sk
<!-- 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>
```

<a id="attr-id"></a>

## id

Type: `<id>` · Required: no · Animatable: no

Unique identifier for the node, reflected to the host `id` attribute.

Related: [`type:id`](types/id.md)

<a id="attr-draggable"></a>

## draggable

Type: `<boolean>` · Required: no · Animatable: no · Default: `false`

Gets whether this node can be dragged.

Related: [`type:boolean`](types/boolean.md)

<a id="attr-x"></a>

## x

Type: `<number>` · Required: no · Animatable: yes · Default: `0`

X position.

Related: [`type:number`](types/number.md)

<a id="attr-y"></a>

## y

Type: `<number>` · Required: no · Animatable: yes · Default: `0`

Y position.

Related: [`type:number`](types/number.md)

<a id="attr-z"></a>

## z

Type: `<number>` · Required: no · Animatable: yes · Default: `0`

Z position.

Related: [`type:number`](types/number.md)

<a id="attr-h"></a>

## h

Type: `<angle>` · Required: no · Animatable: yes · Default: `0`

Heading (Y-axis rotation) in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-p"></a>

## p

Type: `<angle>` · Required: no · Animatable: yes · Default: `0`

Pitch (X-axis rotation) in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-b"></a>

## b

Type: `<angle>` · Required: no · Animatable: yes · Default: `0`

Bank (Z-axis rotation) in radians.

Related: [`type:angle`](types/angle.md)

<a id="attr-quaternion"></a>

## quaternion

Type: `<quaternion>` · Required: no · Animatable: yes

Rotation as quaternion (overrides h, p, b if provided)

Related: [`type:quaternion`](types/quaternion.md)

<a id="attr-sx"></a>

## sx

Type: `<number>` · Required: no · Animatable: yes · Default: `1`

X-axis scale factor.

Related: [`type:number`](types/number.md)

<a id="attr-sy"></a>

## sy

Type: `<number>` · Required: no · Animatable: yes · Default: `1`

Y-axis scale factor.

Related: [`type:number`](types/number.md)

<a id="attr-sz"></a>

## sz

Type: `<number>` · Required: no · Animatable: yes · Default: `1`

Z-axis scale factor.

Related: [`type:number`](types/number.md)

<a id="attr-s"></a>

## s

Type: `<number>` · Required: no · Animatable: no

Uniform scale factor for all axes (overrides sx, sy, sz if provided)

Related: [`type:number`](types/number.md)

<a id="event-handlers"></a>

## Event handlers

<a id="attr-onclick"></a><a id="attr-ondblclick"></a><a id="attr-onauxclick"></a><a id="attr-oncontextmenu"></a><a id="attr-onpointerdown"></a><a id="attr-onpointerup"></a><a id="attr-onpointermove"></a><a id="attr-onpointercancel"></a><a id="attr-onpointerover"></a><a id="attr-onpointerout"></a><a id="attr-onpointerenter"></a><a id="attr-onpointerleave"></a><a id="attr-ongotpointercapture"></a><a id="attr-onlostpointercapture"></a><a id="attr-onwheel"></a><a id="attr-ondragstart"></a><a id="attr-ondrag"></a><a id="attr-ondragenter"></a><a id="attr-ondragover"></a><a id="attr-ondragleave"></a><a id="attr-ondrop"></a><a id="attr-ondragend"></a>

`onclick` — Handler for the click event.

`ondblclick` — Handler for the dblclick event.

`onauxclick` — Handler for the auxclick event.

`oncontextmenu` — Handler for the contextmenu event.

`onpointerdown` — Handler for the pointerdown event.

`onpointerup` — Handler for the pointerup event.

`onpointermove` — Handler for the pointermove event.

`onpointercancel` — Handler for the pointercancel event.

`onpointerover` — Handler for the pointerover event.

`onpointerout` — Handler for the pointerout event.

`onpointerenter` — Handler for the pointerenter event.

`onpointerleave` — Handler for the pointerleave event.

`ongotpointercapture` — Handler for the gotpointercapture event.

`onlostpointercapture` — Handler for the lostpointercapture event.

`onwheel` — Handler for the wheel event.

`ondragstart` — Handler for the dragstart event.

`ondrag` — Handler for the drag event.

`ondragenter` — Handler for the dragenter event.

`ondragover` — Handler for the dragover event.

`ondragleave` — Handler for the dragleave event.

`ondrop` — Handler for the drop event.

`ondragend` — Handler for the dragend event.

<a id="concept-scene-graph"></a>

## Concept: scene-graph

The **scene-graph** family. Members: `sk-scene`, `sk-scene-node`, `sk-cloner`, `sk-orbit`, `sk-target-at`.

Related: [`element:sk-cloner`](elements/sk-cloner.md), [`element:sk-orbit`](elements/sk-orbit.md), [`element:sk-scene`](elements/sk-scene.md), [`element:sk-scene-node`](elements/sk-scene-node.md), [`element:sk-target-at`](elements/sk-target-at.md)

---

Related records: [`element:sk-cloner`](elements/sk-cloner.md), [`element:sk-orbit`](elements/sk-orbit.md), [`element:sk-scene`](elements/sk-scene.md), [`element:sk-target-at`](elements/sk-target-at.md), [`type:angle`](types/angle.md), [`type:boolean`](types/boolean.md), [`type:id`](types/id.md), [`type:number`](types/number.md), [`type:quaternion`](types/quaternion.md)