Three.js中CubeTextureLoader无法加载3D背景问题求助

问题代码 #

//textures
let loader=new THREE.TextureLoader()
let stars = loader.load("./../static/textures/stars3.jpg");

//BACKGROUND
scene.background = new THREE.CubeTextureLoader()
  .load([
    "./../static/textures/stars2.jpg",
    "./../static/textures/stars3.jpg",
    "./../static/textures/stars2.jpg",
    "./../static/textures/stars3.jpg",
    "./../static/textures/stars2.jpg",
    "./../static/textures/stars3.jpg",
    
  ]);

// scene.background = loader.load(
//   "./../static/textures/stars3.jpg"
// );

问题现象 #

使用CubeTextureLoader加载立方体贴图作为3D背景时，背景显示为黑色，无报错但出现以下警告：

• GL_INVALID_VALUE: Each cubemap face must have equal width and height.
• GL_INVALID_OPERATION: Level of detail outside of range.（重复6次）
• GL_INVALID_OPERATION: Texture format does not support mipmap generation.

使用普通TextureLoader加载单张图片作为背景可正常工作。

解决方案 #

1. 确保所有立方体贴图图片为正方形

立方体贴图的每一张面（共6张）必须是宽高相等的正方形，比如512x512、1024x1024像素尺寸。非正方形图片会触发第一条警告，导致贴图加载失败。

2. 禁用mipmap生成

Three.js默认会为立方体贴图生成mipmap，若图片格式不支持或尺寸不符合要求，会触发后两条警告。可以在加载完成后手动关闭mipmap：

const cubeTextureLoader = new THREE.CubeTextureLoader();
const cubeTexture = cubeTextureLoader.load([
  "./../static/textures/stars2.jpg",
  "./../static/textures/stars3.jpg",
  "./../static/textures/stars2.jpg",
  "./../static/textures/stars3.jpg",
  "./../static/textures/stars2.jpg",
  "./../static/textures/stars3.jpg",
]);
// 禁用mipmap，替换过滤方式
cubeTexture.minFilter = THREE.LinearFilter;
cubeTexture.magFilter = THREE.LinearFilter;
scene.background = cubeTexture;

3. 检查图片路径与格式

确保6张图片的路径都正确可访问，同时使用WebGL支持的图片格式（如JPG、PNG），避免使用不兼容的格式。

内容的提问来源于stack exchange，提问作者Raayat Ahmed