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