ThreeJS场景HDR背景不显示及立方体无反射问题求助

核心问题分析 #

1. HDR背景不显示：本地文件协议限制或渲染编码未配置，导致HDR贴图无法正确加载/渲染
2. 金属材质立方体偏暗：多余的CubeCamera干扰环境贴图使用，且未启用基础补光，光照计算配置缺失

分步解决方案 #

1. 修复HDR背景显示问题 #

• 必须用HTTP服务器打开页面（不能直接双击html文件用file://协议），import.meta.url在本地文件协议下会有路径解析/跨域问题
• 给渲染器添加编码与物理光照配置，确保HDR颜色正确输出：

const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio( window.devicePixelRatio );
// 新增以下两行配置
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.physicallyCorrectLights = true; // 让金属材质的光照计算更符合物理规律
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

2. 修复金属材质立方体偏暗问题 #

• 删除多余的CubeCamera和WebGLCubeRenderTarget代码：设置scene.environment后，MeshStandardMaterial会自动继承环境贴图，手动指定envMap反而会干扰正常渲染
• 启用AmbientLight补光（注意AmbientLight不支持阴影，删掉无效的castShadow设置）：

const light = new THREE.AmbientLight(0xffffff, 1) // 把强度降到1，避免过曝
// 删掉 light.castShadow = true; 这行代码完全无效
light.position.z = 2
light.position.y = 3
scene.add(light) // 取消注释，把灯光加入场景

• 简化材质配置，去掉手动设置的envMap：

const material = new THREE.MeshStandardMaterial({ 
  color: 0x00ff00, 
  roughness: 0, 
  metalness: 1
  // 删除 envMap: cubeRenderTarget.texture 这一行
})

3. 关键代码修改后片段 #

// 渲染器核心配置
const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio( window.devicePixelRatio );
renderer.outputEncoding = THREE.sRGBEncoding;
renderer.physicallyCorrectLights = true;
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)

// HDR贴图加载
const skyboxTexture = new URL('./textures/skybox.hdr', import.meta.url)
const loader = new RGBELoader()
loader.load(skyboxTexture, function ( texture ) {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
} );

// 立方体材质配置
const material = new THREE.MeshStandardMaterial({ 
  color: 0x00ff00, 
  roughness: 0, 
  metalness: 1
})

// 灯光配置
const light = new THREE.AmbientLight(0xffffff, 1)
light.position.z = 2
light.position.y = 3
scene.add(light)

额外注意事项 #

• 检查HDR文件是否损坏：可以用在线工具预览确认文件正常
• 阴影功能仅支持DirectionalLight/SpotLight/PointLight，不要给AmbientLight设置阴影属性

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