Chapter 802: Backgrounds and Skyboxes (Manual)

Core Idea

Ways to give a scene a background, from a simple CSS image behind the canvas up to true 3D skyboxes and environment maps drawn by three.js itself.

Key Concepts

• CSS background: setting a background image on the canvas element via CSS — cheap, but invisible to post-processing effects.
• scene.background = texture: has three.js draw the background itself, so post-processing sees it too.
• Skybox: a large cube (or sphere/dome) rendered from the inside using THREE.BackSide, with a horizon-like texture on each face.
• CubeTextureLoader: loads a 6-image cubemap (one per cube face) and can be assigned directly to scene.background.
• Equirectangular map: a single 360° panorama image mapped with EquirectangularReflectionMapping, an alternative to a 6-image cubemap.

Code Examples

const loader = new THREE.TextureLoader();
const texture = loader.load(
  "resources/images/equirectangularmaps/tears_of_steel_bridge_2k.jpg",
  () => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    texture.colorSpace = THREE.SRGBColorSpace;
    scene.background = texture;
  }
);

• What it demonstrates: loading a single equirectangular (360°) image as a scene background.

Key Takeaways

1. A CSS background behind the canvas is the simplest option but isn't affected by post-processing.
2. Assigning a texture to scene.background makes three.js draw it, so post-processing effects apply to it too.
3. A skybox is just a large inverted cube or sphere with a horizon texture, rendered with THREE.BackSide.
4. CubeTextureLoader (6 images) and equirectangular images (1 panorama) are the two common ways to source a skybox/environment texture.

Connects To

• CubeTextureLoader: loads the 6-image cubemap form of a skybox.
• WebGLRenderer: needs alpha: true if you rely on a CSS background showing through.
• PerspectiveCamera / OrthographicCamera: a normal PerspectiveCamera is enough for a skybox; no OrthographicCamera needed.