Skyboxes

A skybox is a way to give your scene a distant environment — a sky, a mountain range, a starry space, or a city skyline. It wraps around your entire scene so the camera is always inside it, no matter which way you look.

Think of it like standing inside a giant balloon. The balloon's surface shows you a painting of the world, and it's far enough away that you can't tell it's just a surface.

method 1: CubeTextureLoader (6 images)

The most common approach is to use six images — one for each face of a cube (right, left, top, bottom, front, back). Three.js loads them with CubeTextureLoader and sets them as the scene's background:

import * as THREE from 'three';

const loader = new THREE.CubeTextureLoader();
const texture = loader.load([
    'px.jpg', // right  (+x)
    'nx.jpg', // left   (-x)
    'py.jpg', // top    (+y)
    'ny.jpg', // bottom (-y)
    'pz.jpg', // front  (+z)
    'nz.jpg', // back   (-z)
]);

scene.background = texture;

The naming convention (px, nx, py, etc.) stands for positive x, negative x, positive y, and so on. It's the standard way to name skybox textures.

method 2: 360-degree equirectangular image (easier)

If you have a single 360-degree photo (like the kind you'd see on Google Street View or in a VR headset), you can use EquirectangularReflectionMapping:

import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';

const rgbeLoader = new RGBELoader();
rgbeLoader.load('/path/to/your.hdr', (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture; // also lights your scene!
});

This loads a single .hdr or .exr file — much easier than finding six separate images. Plus, setting it as scene.environment means it also provides realistic reflections on your objects (perfect for PBR materials).

☝️ tip: An HDR skybox lighting your scene for free is one of the best bang-for-buck effects in Three.js. It makes your materials look photorealistic instantly.

where to get skyboxes

• Poly Haven — free HDR environments, very high quality
• Three.js examples — has a few built-in skyboxes to try
• Blockade Labs — generate your own AI skyboxes
• Create your own — in Blender or with a 360-degree camera

a few things to keep in mind

• File size — HDR images can be large (10–50MB). Compress them or use lower resolutions for the web.
• Performance — for mobile, consider a simple color or gradient background instead of a full skybox.
• Environment mapping — using the skybox as scene.environment gives you realistic reflections and lighting for free.
• Don't forget to remove the skybox when navigating away — set scene.background = null and scene.environment = null to clean up.