Sky-boxes

skybox

A skybox is a large cube (or sphere) with textures on the inside that creates the illusion of a distant environment (sky, space, mountains, etc.). It wraps around your scene so the camera is always inside it.

The most common approach is loading six images – one per face of the cube – using CubeTextureLoader and setting it as the scene's background or using a custom cube shader.

import * as THREE from 'three';

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

scene.background = texture;

To have more control you can use a BixGeometry skybox. If you want a custom material or shader:

const loader = new THREE.CubeTextureLoader();
const textureCube = loader.load([...paths]);

const material = new THREE.MeshBasicMaterial({
    envMap: textureCube,
    side: THREE.BackSide, // render inside
});

const skybox = new THREE.Mesh(
    new THREE.BoxGeometry(1000, 1000, 1000),
    material,
);
scene.add(skybox);

equirectangular (360°) image

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

new RGBELoader().load('environment.hdr', (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.background = texture;
    scene.environment = texture; // for reflections
});

Resources for getting skybox images