---
contentHash: sha256:3088ab5486f07af47bd28c90c9b5fd6fca5a7e4c940eb352e714d4e027977695
documentId: element:sk-scene
kind: element
schemaVersion: 1
skenraVersion: 0.1.0-alpha.1
---
# sk-scene

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

## Overview

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.

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.

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

## Example

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

<a id="children"></a>

## Children

Any Skenra element type plus the scene-root-only <sk-camera-orbit-control>; <style> and <script> are also allowed (HTML standard, not prefixed).

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

## id

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

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

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

## draggable

Type: `<boolean>` · Required: no · Animatable: no · Default: `false` · Inherited from `sk-scene-node`

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` · Inherited from `sk-scene-node`

Gets the X position component.

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

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

## y

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the Y position component.

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

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

## z

Type: `<number>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the Z position component.

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

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

## h

Type: `<angle>` · Required: no · Animatable: yes · Default: `0` · Inherited from `sk-scene-node`

Gets the 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` · Inherited from `sk-scene-node`

Gets the 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` · Inherited from `sk-scene-node`

Gets the bank (Z-axis) rotation in radians.

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

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

## quaternion

Type: `<quaternion>` · Required: no · Animatable: yes · Inherited from `sk-scene-node`

Gets the rotation as a quaternion.

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

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

## sx

Type: `<number>` · Required: no · Animatable: yes · Default: `1` · Inherited from `sk-scene-node`

Gets the X-axis scale factor.

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

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

## sy

Type: `<number>` · Required: no · Animatable: yes · Default: `1` · Inherited from `sk-scene-node`

Gets the Y-axis scale factor.

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

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

## sz

Type: `<number>` · Required: no · Animatable: yes · Default: `1` · Inherited from `sk-scene-node`

Gets the Z-axis scale factor.

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

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

## s

Type: `<number>` · Required: no · Animatable: no · Inherited from `sk-scene-node`

Sets uniform scale on all axes.

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

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

## name

Type: `<string>` · Required: no · Animatable: no · Default: `"scene"`

Optional name for the scene.

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

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

## description

Type: `<string>` · Required: no · Animatable: no · Default: `""`

Gets the scene description: reflected

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

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

## seed

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

The scene's deterministic-randomness seed (an integer).

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

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

## default-controls

Type: `<scene-controls-mode>` · Required: no · Animatable: no · Default: `"auto"`

Default-controls policy: reflected from the `default-controls`

Related: [`type:scene-controls-mode`](types/scene-controls-mode.md)

<a id="attr-no-auto-pause"></a>

## no-auto-pause

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

Disables viewport-based auto-pause when `true`. Reflected from the

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

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

## render-margin

Type: `<length>` · Required: no · Animatable: no · Default: `"200px"`

IntersectionObserver root margin used by viewport auto-pause.

Related: [`type:length`](types/length.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.

---

Related records: [`type:angle`](types/angle.md), [`type:boolean`](types/boolean.md), [`type:id`](types/id.md), [`type:length`](types/length.md), [`type:number`](types/number.md), [`type:quaternion`](types/quaternion.md), [`type:scene-controls-mode`](types/scene-controls-mode.md), [`type:string`](types/string.md)