CubeTextureLoader
Quick answer
CubeTextureLoader builds a CubeTexture from six square images ordered right, left, top, bottom, front, and back. Load them with load() or loadAsync() to create skyboxes and environment reflections for materials that accept an envMap. The array passed to load() must contain exactly six URLs in that fixed order.
new THREE.CubeTextureLoader ( manager )
Key points
- Pass an array of six URLs to load(urls, onLoad, onProgress, onError); the result is a CubeTexture.
- All six faces must be square and identically sized, ideally 1024 or 2048 pixels.
- setPath() and setCrossOrigin() configure shared base paths and CORS behavior.
Example
const loader = new THREE.CubeTextureLoader();
loader.setPath('/textures/sky/');
const cubeTexture = loader.load(
['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'],
function () {
console.log('天空盒加载完成');
}
);
cubeTexture.colorSpace = THREE.SRGBColorSpace;
scene.background = cubeTexture;
const env = cubeTexture;
const material = new THREE.MeshStandardMaterial({
color: 0xb9c6d2,
metalness: 0.8,
roughness: 0.15,
envMap: env
});Notes
- Misordered faces show sky and ground swapped; the order is +X, -X, +Y, -Y, +Z, -Z.
- Mixed face sizes cause sampling errors and black faces on some devices.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). CubeTextureLoader. https://www.jingweizhi.com/en/three/api/cube-texture-loader.html (accessed 2026-11-03).