首页 / three.js / API 文档
CubeTextureLoader
先看结论
立方体贴图加载器。按前、后、上、下、右、左六张图片拼成一张立方体纹理， 用作天空盒或环境反射。
new THREE.CubeTextureLoader(manager)
方法
| 方法 | 返回 | 说明 |
|---|---|---|
load(urls, onLoad, onProgress, onError) | CubeTexture | urls 必须是长度为 6 的数组 |
loadAsync(urls, onProgress) | Promise<CubeTexture> | 六张图全部到达后 resolve |
setCrossOrigin(value) | this | 跨域属性 |
setPath(path) | this | 基础路径 |
setRequestHeader(header) | this | 附加请求头 |
六个面的顺序
| 下标 | 方向 | 对应 |
|---|---|---|
| 0 | +X | 右 |
| 1 | -X | 左 |
| 2 | +Y | 上 |
| 3 | -Y | 下 |
| 4 | +Z | 前 |
| 5 | -Z | 后 |
示例：天空盒
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
});顺序错了会怎样
顺序写错时天空盒不会报错，只是接缝处的建筑与地平线对不上， 抬头和低头的画面互换。调试时把六张图分别填成不同颜色， 转动视角逐一核对，比盯着照片猜更快。
环境贴图更推荐等距柱状投影
单张全景图（equirectangular）比六张立方体图更好维护，
用 EquirectangularReflectionMapping 直接赋给
scene.environment 即可。需要 PBR 材质的高质量反射时，
再用 PMREMGenerator 预过滤，避免金属表面出现锯齿状高光。
六张图必须是正方形且尺寸一致。尺寸不一致的立方体贴图在 部分设备上采样错乱，表现为某个面完全变黑。 上线前统一重采样到 1024 或 2048。
经纬志（2026）。《CubeTextureLoader》。https://www.jingweizhi.com/three/api/cube-texture-loader.html（访问日期 2026-11-03）。