logo

Babylon.js Market

Skybox

rendering

Skybox

Free

Install with the CLI:

bjs download Skybox

Skybox

A procedural gradient sky with a sun disc that can lock onto your DirectionalLight.

What it does

Skybox is data-only: it holds four colors (zenithColor, horizonColor, groundColor, sunColor), a sunDirection, disc/glow sizing (sunSize, sunGlowSize), and the dome diameter (size). On entity attach the System reads those into a spec and calls createSkybox on the renderer, storing the returned opaque handle, then emits skybox.created. If you set followLight, each frame it finds the matching DirectionalLight, takes the negative of that light's direction as the sun direction, pushes it through updateSkyboxSun, and announces skybox.sun.changed — so the sky's sun and your cast shadows stay aimed together as you rotate the light. With followLight: "auto" it grabs the first DirectionalLight in the world; with a tag string it grabs the first entity carrying that tag that also has a DirectionalLight.

Use it in a scene

A scene is just data — a list of entities, each with its components. At startup the SceneLoader turns this JSON into a live world; edit the file and reload to rebuild it.

Build it from scratch with the bjs CLI:

  1. 1Scaffold a project
    npm create @babylonjsmarket/arcade@latest my-game

    World, renderer, and dev server — ready to run.

  2. 2Install dependencies
    cd my-game && npm install
  3. 3Add Skybox
    bjs download Skybox

    Copies its source into src/ so the scene resolves.

    First time? Run bjs login once.

  4. 4Paste the scene into src/scenes/arcade-room.ts and run
    npm run dev

    SceneLoader builds the world from the JSON; reload to rebuild.

JSON
{
  "Sky": {
    "components": {
      "Skybox": {
        "zenithColor": [0.08, 0.12, 0.28],
        "horizonColor": [0.95, 0.55, 0.32],
        "sunColor": [1.0, 0.85, 0.65],
        "sunSize": 0.9994,
        "sunGlowSize": 80,
        "followLight": "sun"
      }
    }
  }
}

Props

  • zenithColor ([r,g,b], default [0.08, 0.12, 0.28]) — color straight overhead; the deep top of the gradient.
  • horizonColor ([r,g,b], default [0.95, 0.55, 0.32]) — color at the horizon band; the default is a warm sunset amber.
  • groundColor ([r,g,b], default [0.12, 0.08, 0.16]) — color below the horizon (the underside of the dome).
  • sunColor ([r,g,b], default [1.0, 0.85, 0.65]) — color of the sun disc and its halo.
  • sunDirection ([x,y,z], default [0.4, 0.18, 0.2]) — direction to the sun (normalized by the renderer). Ignored at runtime once followLight is set — the tracked light drives it instead.
  • sunSize (number, default 0.9994) — disc sharpness in [0,1]; higher values give a smaller, harder-edged sun.
  • sunGlowSize (number, default 80) — halo falloff around the disc; higher values give a tighter glow.
  • size (number, default 800) — diameter of the sky dome in world units; make it large enough to enclose your scene and camera.
  • followLight (string, optional, no default) — "auto" to track the first DirectionalLight in the world, or an entity tag to track the first tagged entity that has a DirectionalLight. Leave unset for a fixed sky driven only by sunDirection.

Events

  • emits skybox.created (SkyboxEvents.CREATED) once the dome is built, with { entityId }.
  • emits skybox.sun.changed (SkyboxEvents.SUN_CHANGED) each time a tracked light moves the sun past the change threshold, with { entityId, sun } (the new sun direction).

Dependencies

None declared — Skybox stands alone and renders a fixed sky with just sunDirection. followLight is an optional link: it looks up a separate DirectionalLight entity (by "auto" or by tag), not a sibling component on the Skybox entity, so you only need a DirectionalLight in the scene if you want the sun to track it.

Notes

  • Sun tracking uses a 0.0005-per-channel threshold, so the sun only re-pushes (and re-emits skybox.sun.changed) when the light actually turns.
  • When followLight is set the sun is primed off the tracked light on creation, so the very first frame isn't visibly mis-aligned before the update loop runs.
  • If the tag names no entity, or the tagged entity has no DirectionalLight, followLight silently finds nothing and the sky holds its last sunDirection — no error, no update.
  • The last-pushed sun direction lives in a WeakMap keyed by the component, so it survives entity pooling without leaking.
  • On entity removal the System disposes the handle and clears its runtime, so re-adding the entity rebuilds the sky cleanly.

More like this

DirectionalLight
EnvironmentTexture
HemisphericLight
Mesh
MeshPrimitive
Renderable
Shadow
SpaceDust
ToneMapping

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search