The root of every Skenra scene — the container that every node, material, light, and camera lives inside, and the surface the scene is drawn onto.
JavaScript API:
Scene
The scene is the top of the SceneNode hierarchy: it extends
sk-scene-node, so it has a transform of its own, but its real job is to
be the tree root everything else hangs from. Only content reachable from the
scene renders. Following the scene-graph conventions, a child's transform is
relative to its parent and materials inherit down the tree (a child uses an
ancestor's material unless it declares its own), and DOM-style events
capture/bubble through the hierarchy.
Defaults. A scene renders even when minimally specified: when no camera or
light is present it supplies a sensible default camera and a default light, so a
lone shape is visible without ceremony. Declare a sk-perspective-camera
or sk-directional-light to take control.
Related. Everything else in this reference is something a scene contains: the
geometry primitives (sk-sphere, sk-cube), grouping nodes
(sk-scene-node), lights, cameras, and the materials/paints that give
surfaces appearance.
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 root of every Skenra scene. Children are nodes, materials, lights, cameras. A default camera and light are provided when none are declared. -->
<sk-scene>
<sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
<sk-sphere radius="1" segments="6">
<sk-surface-paint material="#mat"></sk-surface-paint>
</sk-sphere>
</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 |
Gets the X position component. |
yanimatable |
<number> |
0 |
Gets the Y position component. |
zanimatable |
<number> |
0 |
Gets the Z position component. |
hanimatable |
<angle> |
0 |
Gets the heading (Y-axis) rotation in radians. |
panimatable |
<angle> |
0 |
Gets the pitch (X-axis) rotation in radians. |
banimatable |
<angle> |
0 |
Gets the bank (Z-axis) rotation in radians. |
quaternionanimatable |
<quaternion> ({ <number>, <number>, <number>, <number> }) |
— | Gets the rotation as a quaternion. |
sxanimatable |
<number> |
1 |
Gets the X-axis scale factor. |
syanimatable |
<number> |
1 |
Gets the Y-axis scale factor. |
szanimatable |
<number> |
1 |
Gets the Z-axis scale factor. |
s |
<number> |
— | Sets uniform scale on all axes. write-only |
name |
<string> |
"scene" |
Optional name for the scene. |
description |
<string> |
"" |
Gets the scene description: reflected |
seed |
<number> |
0 |
The scene's deterministic-randomness seed (an integer). |
default-controls |
<scene-controls-mode> ("auto" | "none") |
"auto" |
Default-controls policy: reflected from the default-controls |
no-auto-pause |
<boolean> |
false |
Disables viewport-based auto-pause when true. Reflected from the |
render-margin |
<length> |
"200px" |
IntersectionObserver root margin used by viewport auto-pause. |
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
Any Skenra element type plus the scene-root-only <sk-camera-orbit-control>; <style> and <script> are also allowed (HTML standard, not prefixed).
Used in guides: Scene basics