`<sk-directional-light>`

← prev index next →

The base concept for a light: what illuminates the scene so surfaces are shaded. This element is the directional (sun-like) light.

JavaScript API: DirectionalLight

Remarks

Lights are scene nodes that decide how bright each surface is. Skenra has two kinds, and a scene provides sensible defaults until you declare your own.

A directional light (<sk-directional-light>) is a distant, sun-like source whose rays are all parallel: its intensity and color set the light, and its direction comes from the node's orientation — pitch it with p, turn it with h — so rotating the node moves the sun. It can cast shadows (cast-shadow) and aim at a target.

The other light, an ambient light (sk-ambient-light), adds flat, directionless fill that lifts the shadows evenly; it has only intensity and color, casts no shadows, and combines additively with the directional key light.

The example lights a sphere with a single sun pitched down from above and arcs it across the sky.

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.

<sk-scene>
    <sk-plain-material id="mat" base-color="#cccccc"></sk-plain-material>

    <!-- A sphere to be lit -->
    <sk-sphere radius="1.5" segments="6">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-sphere>

    <!-- Sunlight pitched 45° from above, arcing across the sky.
         The animated property (`p` = pitch) is a keyframe attribute. -->
    <sk-directional-light intensity="1" p="-45deg">
        <sk-animation duration="10000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" p="-30deg"></sk-keyframe>
            <sk-keyframe offset="0.5" p="-90deg"></sk-keyframe>
            <sk-keyframe offset="1" p="-150deg"></sk-keyframe>
        </sk-animation>
    </sk-directional-light>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`cast-shadow`	`<boolean>`	`true`	Whether this light generates shadows.
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`draggable`	`<boolean>`	`false`	Gets whether this node can be dragged.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<angle>`	`0`	Bank (Z-axis rotation) in radians.
`quaternion`animatable	`<quaternion> ({ <number>, <number>, <number>, <number> })`	—	Rotation as quaternion (overrides h, p, b if provided)
`sx`animatable	`<number>`	`1`	X-axis scale factor.
`sy`animatable	`<number>`	`1`	Y-axis scale factor.
`sz`animatable	`<number>`	`1`	Z-axis scale factor.
`s`	`<number>`	—	Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only
`target`	`<3d-vector> ([<number>, <number>, <number>])`	—	The point this light aims at — a world-space `[x, y, z]` or the id of
`intensity`animatable	`<number>`	`1.0`	Light brightness multiplier.
`color`animatable	`<color>`	`"white"`	The light's color.

Event handler attributes

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

Used in guides: Scene basics

↑ Documentation home · ← All elements