Three.js场景背景图片设置求助：已写代码但背景仍为黑色

你的问题出在用单张图片通过CubeTextureLoader创建天空盒——立方体贴图需要6张对应立方体六个面的纹理（右、左、上、下、前、后），单张图无法被正确解析，所以背景显示黑色。下面给你两种适配太空主题的解决方案：

方案1：使用标准天空盒纹理 #

准备6张对应方向的太空天空盒图片，按固定顺序加载：

const loader = new THREE.CubeTextureLoader();
// 顺序必须是：右、左、上、下、前、后
const skyboxTexture = loader.load([
  'textures/skybox_right.jpg',
  'textures/skybox_left.jpg',
  'textures/skybox_top.jpg',
  'textures/skybox_bottom.jpg',
  'textures/skybox_front.jpg',
  'textures/skybox_back.jpg'
]);
scene.background = skyboxTexture;

方案2：用全景图做沉浸式太空背景（更推荐） #

太空场景常用2:1比例的全景图，只需一张图就能实现环绕效果，步骤如下：

import spacePanorama from '../homepage folder/space_panorama.jpg';

const textureLoader = new THREE.TextureLoader();
const panoramaTex = textureLoader.load(spacePanorama);
// 设置全景图专用的映射模式
panoramaTex.mapping = THREE.EquirectangularRefractionMapping;
scene.background = panoramaTex;

关键注意点 #

• 路径检查：确保图片import路径与文件实际位置一致，路径错误会导致纹理加载失败
• 图片规格：全景图建议用2:1分辨率（如4096×2048），天空盒每张图尺寸需统一（如1024×1024）
• 性能优化：高分辨率纹理建议开启压缩，避免拖慢渲染速度

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