three.js控制hdr曝光

要控制 three.js 中的 HDR 曝光，可以在渲染器（renderer）中设置 toneMappingExposure 属性的值。具体步骤如下：

1.创建渲染器时，需要开启 HDR 和 tone mapping 功能：

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
  gammaFactor: 2.2,
  outputEncoding: THREE.sRGBEncoding,
  toneMapping: THREE.ACESFilmicToneMapping,
  toneMappingExposure: 1.0,
  powerPreference: "high-performance",
  HDR: true,
});

2.在渲染循环中更新 toneMappingExposure 属性的值：

function animate() {
  requestAnimationFrame(animate);

  // 更新 toneMappingExposure 的值
  renderer.toneMappingExposure = Math.pow(1.1, exposure);

  renderer.render(scene, camera);
}

在上述代码中，exposure 变量是一个用于控制曝光的值。你可以在控制台或者页面上添加控制面板，让用户可以动态地调整这个值。

需要注意的是，如果你使用了 HDR 纹理或者 HDR 灯光，那么你需要设置相应的属性，才能正确地渲染场景。例如，如果你使用了 HDR 纹理，那么需要在材质中设置：

const material = new THREE.MeshStandardMaterial({
  map: hdrTexture,
  envMap: hdrTexture,
  envMapIntensity: 5, // 环境贴图强度
});