DirectionalLight

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

Declarative element: <sk-directional-light>

Global: available as sk.DirectionalLight inside a scene <script>.

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.

Constructor

constructor(config?: { id?: string; intensity?: number; castShadow?: boolean; color?: ColorInput; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

const scene = new Scene();
scene.appendChild(new Sphere({ id: 'lit', radius: 1.5 }));

// Sunlight pitched from above; the direction comes from the node's rotation.
const sun = new DirectionalLight({ id: 'sun', intensity: 1.0 });
sun.p = -Math.PI / 4; // 45° from above (pitch / X-axis)
scene.appendChild(sun);

// Arc it across the sky (id lives in the options, per the WAAPI signature).
sun.animate([
  { offset: 0, p: -Math.PI / 6 },   // low
  { offset: 0.5, p: -Math.PI / 2 }, // overhead
  { offset: 1, p: -5 * Math.PI / 6 } // low, other side
], { id: 'sun-arc', duration: 10000, iterations: Infinity, direction: 'alternate' });

Used in guides: Scene basics

↑ Documentation home · ← All classes