THREE.js中加载的HDR垂直轴180度旋转实现求助

你的问题出在scene.environment的自动PMREM转换会忽略原纹理的matrix设置，同时背景纹理的矩阵应用也需要确保正确的配置顺序。以下是可行的解决方案：

关键原因 #

当你将EquirectangularReflectionMapping类型的纹理直接赋值给scene.environment时，Three.js会自动使用PMREMGenerator生成预过滤的环境贴图，这个过程不会保留原纹理的矩阵变换。而背景纹理的矩阵虽然可能生效，但需要正确关闭自动更新才能固定变换。

修复代码 #

// ----- Load HDRI Lighting -----
const hdrTextureURL = new URL(hdr, import.meta.url)
const loader = new RGBELoader();
loader.load(hdrTextureURL, function(texture) {
   texture.mapping = THREE.EquirectangularReflectionMapping;

   // 先禁用矩阵自动更新，再设置旋转矩阵
   texture.matrixAutoUpdate = false;
   // 创建绕Y轴旋转180度的矩阵（等价于makeRotationAxis写法）
   const rotationMatrix = new THREE.Matrix4().makeRotationY(Math.PI);
   texture.matrix.copy(rotationMatrix);

   // 设置场景背景（背景纹理会应用矩阵变换）
   scene.background = texture;

   // 手动生成带旋转的PMREM环境贴图
   const pmremGenerator = new THREE.PMREMGenerator(renderer);
   pmremGenerator.compileEquirectangularShader();
   // 从带矩阵的纹理生成环境贴图
   const envMap = pmremGenerator.fromEquirectangular(texture).texture;
   scene.environment = envMap;

   // 清理资源避免内存泄漏
   pmremGenerator.dispose();
})

额外说明 #

• 使用makeRotationY(Math.PI)比makeRotationAxis写法更简洁，效果完全一致。
• 必须手动生成PMREM环境贴图，才能让旋转矩阵作用于环境光照。
• 原代码中scene.environment.rotation是无效语句，已移除。

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