Environment

The Environment component holds scene-wide settings:

• Skybox: gradient, solid color, equirectangular image, or none.
• Fog: linear, exponential, or none.
• Gravity: the world gravity vector applied by the physics system (in m/s²).

It is a singleton there is exactly one Environment entity per scene, owned by the editor.

Managed by: EnvironmentSyncSystem

Get the component from the world

Use world.getEnvironmentComponent() — a convenience method that handles the entity lookup for you:

import { Behaviour } from "@relu-interactives/spatial-ecs";

export default class ReadEnvironment extends Behaviour {
  init() {
    const env = this.world.getEnvironmentComponent();
    if (!env) return;

    console.log("skybox type", env.values.skybox.type);
    console.log("gravity", env.values.gravity);
  }
}

env.values is the live state object. Mutating fields on it is enough — EnvironmentSyncSystem reads it every frame and pushes changes into the three.js scene.

Change values at runtime

Switch the skybox

env.values.skybox.type = "gradient";
env.values.skybox.gradient.colors = ["#0b1026", "#3b6dd6", "#f7d488"];
env.values.skybox.gradient.effect = "linear"; // "linear" | "radial" | "angular"

// Or use a solid color:
env.values.skybox.type = "color";
env.values.skybox.color = "#101010";

// Or an equirectangular image:
env.values.skybox.type = "image";
env.values.skybox.imageUrl = "/assets/skies/studio.hdr";

// Or disable it:
env.values.skybox.type = "none";

Configure fog

// Linear fog
env.values.fog.type = "linear";
env.values.fog.color = "#aabbcc";
env.values.fog.linear.near = 1;
env.values.fog.linear.far = 50;

// Exponential fog
env.values.fog.type = "exponential";
env.values.fog.exponential.density = 0.05;

// Off
env.values.fog.type = "none";

Change physics gravity

// Moon-like gravity
env.values.gravity = { x: 0, y: -1.62, z: 0 };

// Zero-G
env.values.gravity = { x: 0, y: 0, z: 0 };

Authorable values

Path	Type	Default	Notes
skybox.type	"gradient" | "color" | "image" | "none"	"none"	Active skybox mode.
skybox.color	string (hex)	"#1e1e1e"	Used when type is "color".
skybox.imageUrl	string	""	Used when type is "image".
skybox.gradient.colors	string[]	["#464766", "#657ea6", "#0f0e1a"]	Hex color stops.
skybox.gradient.effect	"linear" | "radial" | "angular"	"linear"	Gradient distribution.
fog.type	"linear" | "exponential" | "none"	"none"	Fog model.
fog.color	string (hex)	"#1e1e1e"	Fog color.
fog.linear.near	number	1	Distance where fog starts.
fog.linear.far	number	100	Distance where fog reaches full opacity.
fog.exponential.density	number	0.002	Higher = thicker fog.
gravity	{ x, y, z }	(0, -9.81, 0)	World units per second squared.

API reference

• Class: Environment
• Source: core/components/Environment.ts