---
date: 2026-6-20
---

<!-- markdownlint-disable MD001 -->

# Skyboxes

![skybox](https://cdn.jsdelivr.net/gh/gabeatwell/portfolio-assets@main/images/threejs_skybox.webp)

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:

```javascript
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 **p**ositive **x**, **n**egative **x**, **p**ositive **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`:

```javascript
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](https://polyhaven.com/hdris) — free HDR environments, very high quality
- [Three.js examples](https://threejs.org/examples/#webgl_skybox) — has a few built-in skyboxes to try
- [Blockade Labs](https://blockadelabs.com) — 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.
