Lights

Lights are not a separate subsystem with a different authoring model. They are normal string="3d" objects with light-specific string-3d values.

That keeps scene composition consistent: geometry, groups, and lights all enter through the same DOM contract.

Supported types

• ambientLight
• directionalLight
• pointLight
• spotLight
• hemisphereLight

When to use each one

Ambient light

Use it for baseline visibility. It is the easiest way to keep the dark side of the scene readable.

Directional light

Use it for form definition and shadow direction. This is usually the main "sun" light in a simple setup.

Point light

Use it for localized glow, accents, or stage lighting around a subject.

Spot light

Use it when you want an obvious cone of influence and stronger art direction.

Hemisphere light

Use it when the scene needs a soft sky/ground split instead of a single flat fill.

Runtime contract

Activation

<div string="3d" string-3d="directionalLight"></div>

Key CSS variables

Light objects also use the shared transform variables. A point or spot light can be positioned with the same --translate-* inputs used by visible objects.

Example

<div
  string="3d"
  string-id="sun"
  string-3d="directionalLight"
  style="
    --light-intensity: 1.2;
    --translate-z: 300;
    --translate-x: -120;
    --translate-y: -80;
  "
></div>

<div
  string="3d"
  string-3d="ambientLight"
  style="--light-intensity: 0.35"
></div>

What the runtime does

• The light type decides which engine light object is created.
• Position and rotation are synchronized from computed styles just like any other object.
• If --light-target is set, the runtime resolves it by object id.
• Shadow options are read from the same CSS surface rather than from an imperative light setup API.

Practical note

Most scenes start well with only two lights: one ambient light and one directional or point light. Add more only when the scene actually needs clearer separation or stronger mood.