Three.js中X轴为上轴时HDR环境贴图方向错误的修复方法

一、直接修复HDR贴图方向 #

Three.js默认以Y轴为上方向，当你将场景上轴改为X轴后，环境贴图的坐标系和场景不匹配，导致方向错误。无需修改HDR文件，只需在生成环境贴图后调整其旋转矩阵即可：

修改你的代码，在生成envMap后添加旋转矩阵设置：

this.pmremGenerator = new THREE.PMREMGenerator(renderer as any);
new RGBELoader().setDataType(THREE.UnsignedByteType).setPath('assets/').load('adams_place_bridge_1k.hdr', (texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  const envMap = this.pmremGenerator.fromEquirectangular(texture).texture;
  
  // 添加这部分代码：绕Z轴旋转90度，让贴图的上方向对齐场景X轴
  const rotationMatrix = new THREE.Matrix4().makeRotationZ(Math.PI / 2);
  envMap.matrix = rotationMatrix;
  envMap.matrixAutoUpdate = false; // 关闭自动更新，保持自定义矩阵
  
  scene.background = envMap;
  scene.environment = envMap;
  texture.dispose();
});

如果旋转方向不对（比如贴图倒了），可以尝试将角度改为-Math.PI / 2，根据实际效果调整。

另外，也可以在原始HDR纹理上设置旋转，再生成PMREM贴图，效果一致：

// 在生成envMap之前，给原始纹理设置旋转
texture.rotation = Math.PI / 2;
texture.center.set(0.5, 0.5); // 绕纹理中心旋转

二、立方体贴图作为替代方案 #

完全可以用立方体贴图替代Equirectangular格式的HDR，步骤如下：

1. 先将你的Equirectangular HDR转换成6张立方体贴图（正X、负X、正Y、负Y、正Z、负Z方向），可通过Photoshop、Blender或在线转换工具完成。
2. 使用CubeTextureLoader加载立方体贴图，并同样调整旋转矩阵匹配X轴向上：

const cubeLoader = new THREE.CubeTextureLoader();
cubeLoader.setPath('assets/cubemap/')
  .load([
    'posx.hdr', 'negx.hdr',
    'posy.hdr', 'negy.hdr',
    'posz.hdr', 'negz.hdr'
  ], (cubeMap) => {
    cubeMap.mapping = THREE.CubeReflectionMapping;
    
    // 添加旋转矩阵对齐X轴上方向
    const rotationMatrix = new THREE.Matrix4().makeRotationZ(Math.PI / 2);
    cubeMap.matrix = rotationMatrix;
    cubeMap.matrixAutoUpdate = false;
    
    scene.background = cubeMap;
    scene.environment = cubeMap;
  });

立方体贴图的优势是部分场景下渲染性能更优，但需要额外的贴图转换步骤，如果你已经有现成的HDR文件，优先用第一种方法更高效。

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