介绍
在Three.js中，HDR（高动态范围）渲染是一种渲染技术，其目的是提供更广泛的亮度范围和更准确的颜色表示，以更好地模拟真实世界的光照情况
更广泛的亮度范围： HDR允许场景中的亮度范围更广，可以包括非常明亮和非常暗的区域。传统的渲染技术可能在亮度极端值上失真，导致细节丢失或颜色变淡。HDR可以捕捉并呈现这些极端的亮度值，使图像更真实。
更准确的颜色表示： HDR使用浮点数格式来表示颜色，而不是常规的8位或16位整数。这使得它能够表示更多的颜色细节，尤其是在光照变化较大的情况下。这对于模拟光照、反射和折射等光学现象非常重要。
逼真的光照效果： HDR有助于实现逼真的光照效果，特别是在模拟光源的强烈辐射、高光和镜面反射时。这使得渲染的场景更接近于真实世界中的观察体验。
举个栗子：
这里添加了一个环境HDR，创建了一个立方体，材质粗糙度0，金属度1，可以清晰的反射出HDR的环境贴图。
代码实现
import * as THREE from 'three'; import { RGBELoader } from 'three/examples/jsm/Addons.js'; // 主要代码 const rgbeLoader = new RGBELoader(); rgbeLoader.load( '/path/你的hdr文件.hdr', (texture) => { const pmremGenerator = new THREE.PMREMGenerator(this.renderer); pmremGenerator.compileEquirectangularShader(); const envMap = pmremGenerator.fromEquirectangular(texture).texture; // 设备为背景（也可以用其他的的场景背景） scene.background = envMap; // 设为场景中所有物理材质的环境贴图 scene.environment = envMap; texture.dispose(); pmremGenerator.dispose(); }, undefined, (error) => { console.error('Error loading HDR texture', error); }, );
1234567891011121314151617181920212223
