如何调整Three.js中HDRI环境的光照强度以降低物体亮度？

问题描述 #

我通过以下代码加载HDRI环境：

import {RGBELoader} from './RGBELoader.js'

new RGBELoader().load('./assets/images/brown_photostudio_01_1k.hdr', function (texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping
    scene.environment = texture
})

目前场景中的物体亮度过高，需要降低该HDRI环境产生的光照强度。

解决方案 #

以下是几种直接有效的处理方法：

• 调整HDR纹理的exposure属性
  获取HDR纹理后，直接设置texture.exposure控制曝光度，数值越小，环境光越暗，可根据实际效果微调：

  new RGBELoader().load('./assets/images/brown_photostudio_01_1k.hdr', function (texture) {
      texture.mapping = THREE.EquirectangularReflectionMapping
      // 示例：将曝光度设为0.5，可按需调整
      texture.exposure = 0.5
      scene.environment = texture
  })
  

• 利用PMREMGenerator缩放环境光强度
  通过PMREMGenerator处理HDR纹理时，传入缩放因子（小于1的值）来降低光照强度，适合需要更精细控制的场景：

  import {RGBELoader} from './RGBELoader.js'
  import {PMREMGenerator} from './PMREMGenerator.js'
  
  new RGBELoader().load('./assets/images/brown_photostudio_01_1k.hdr', function (texture) {
      const pmremGenerator = new PMREMGenerator(renderer)
      pmremGenerator.compileEquirectangularShader()
      // 第二个参数为缩放因子，0.5表示将强度减半
      const envMap = pmremGenerator.fromEquirectangular(texture, 0.5).texture
      scene.environment = envMap
      // 清理资源避免内存泄漏
      texture.dispose()
      pmremGenerator.dispose()
  })
  

• 设置场景的environmentIntensity属性
  直接修改Scene对象的environmentIntensity属性，统一控制环境光强度，无需修改纹理本身：

  // 加载纹理后设置，示例值为0.6，可按需调整
  scene.environmentIntensity = 0.6
  

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