用Three.js和HDR贴图快速实现真实环境光照的完整指南
在Web 3D开发中，环境光照是让场景看起来真实的关键因素之一。传统的手动设置光源方式不仅耗时，而且难以达到自然的光照效果。本文将介绍如何利用Three.js和HDR环境贴图，在5分钟内为你的3D模型添加逼真的环境光照。
1. 环境光照基础与HDR贴图
环境光照（Ambient Lighting）是模拟场景中来自各个方向的间接光照效果。与直接光源不同，它能够创造出更加自然、柔和的光影过渡。基于图像的照明（Image Based Lighting，简称IBL）技术通过使用真实环境拍摄或生成的HDR贴图来实现这一效果。
HDR（High Dynamic Range）贴图相比普通图片能存储更宽的亮度范围，从最暗的阴影到最亮的高光都能完整保留。这使得它特别适合用于光照计算，能够产生更加真实的反射和漫反射效果。
获取HDR环境贴图的常用途径包括：
- 免费资源网站：如HDRI Haven、Poly Haven等提供大量高质量的CC0授权HDR贴图
- 商业资源库：如Texture Haven、Poliigon等提供专业级HDR素材
- 自行拍摄：使用专业相机和HDR拍摄技术创建自定义环境贴图
提示：选择HDR贴图时，应考虑场景的实际光照需求。室内场景通常需要柔和均匀的光照，而室外场景可能需要更强烈的方向性光照。
2. Three.js中的环境光照实现
Three.js提供了完整的工具链来处理HDR贴图并实现基于图像的照明。以下是实现的基本步骤：
2.1 加载HDR贴图
首先需要将HDR贴图加载到Three.js场景中。Three.js本身不直接支持.hdr格式，但可以通过RGBELoader扩展来实现：
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'; const hdrLoader = new RGBELoader(); hdrLoader.load('path/to/your/environment.hdr', function(texture) { // 纹理加载完成后的处理 texture.mapping = THREE.EquirectangularReflectionMapping; scene.environment = texture; // 设置为场景环境贴图 });2.2 生成辐照度图
为了优化性能，Three.js使用PMREM（Pre-filtered Mipmapped Radiance Environment Map）技术预处理HDR贴图：
const pmremGenerator = new THREE.PMREMGenerator(renderer); pmremGenerator.compileEquirectangularShader(); const envMap = pmremGenerator.fromEquirectangular(texture).texture; scene.environment = envMap;PMREMGenerator会自动处理以下工作：
- 将等距柱状投影的HDR贴图转换为立方体贴图
- 生成不同粗糙度级别的预过滤环境贴图
- 计算辐照度图用于漫反射光照
2.3 应用到材质
Three.js的标准材质（MeshStandardMaterial）和物理材质（MeshPhysicalMaterial）都内置支持环境光照：
const material = new THREE.MeshStandardMaterial({ metalness: 0.9, roughness: 0.1, envMap: scene.environment // 使用场景环境贴图 });关键材质参数对光照效果的影响：
| 参数 | 作用 | 典型值范围 |
|---|---|---|
| metalness | 控制材质金属感 | 0（非金属）到1（金属） |
| roughness | 控制表面粗糙度 | 0（镜面）到1（完全漫反射） |
| envMapIntensity | 环境贴图强度 | 根据场景调整，通常0.5-2 |
3. 实战案例与代码示例
下面是一个完整的Three.js场景设置示例，展示如何快速实现环境光照：
// 初始化场景、相机和渲染器 const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; document.body.appendChild(renderer.domElement); // 加载HDR环境贴图 new RGBELoader() .setPath('textures/') .load('industrial_sunset_02_1k.hdr', function(texture) { texture.mapping = THREE.EquirectangularReflectionMapping; // 使用PMREMGenerator处理环境贴图 const pmremGenerator = new THREE.PMREMGenerator(renderer); const envMap = pmremGenerator.fromEquirectangular(texture).texture; scene.environment = envMap; scene.background = envMap; // 创建测试物体 const geometry = new THREE.SphereGeometry(1, 32, 32); const material = new THREE.MeshStandardMaterial({ metalness: 0.7, roughness: 0.2 }); const sphere = new THREE.Mesh(geometry, material); scene.add(sphere); // 添加一些基础照明（可选） const light = new THREE.DirectionalLight(0xffffff, 0.5); light.position.set(1, 1, 1); scene.add(light); }); // 设置相机位置 camera.position.z = 5; // 渲染循环 function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();4. 常见问题与优化技巧
4.1 贴图不显示的可能原因
- HDR贴图路径错误：检查文件路径是否正确
- 纹理编码不匹配：确保设置了正确的输出编码
- 材质未启用环境贴图：确认材质的envMap属性已设置
4.2 性能优化建议
- 控制贴图分辨率：根据场景需求选择适当分辨率的HDR贴图（1k-4k足够大多数场景使用）
- 复用环境贴图：多个物体可以共享同一个环境贴图
- 按需更新：静态场景可以只计算一次PMREM，动态场景可能需要定期更新
4.3 高级效果实现
要实现更真实的镜面反射效果，可以结合以下技术：
// 启用屏幕空间反射（需要额外扩展） import { SSRPass } from 'three/examples/jsm/postprocessing/SSRPass.js'; const ssrPass = new SSRPass({ renderer, scene, camera, width: window.innerWidth, height: window.innerHeight }); // 添加到后期处理管道 const composer = new EffectComposer(renderer); composer.addPass(ssrPass);5. 不同场景下的HDR贴图选择
根据项目需求，可以选择不同类型的HDR环境贴图：
- 产品展示：使用中性色、均匀光照的室内环境
- 建筑可视化：选择与实际建筑位置相符的室外光照
- 游戏场景：根据游戏风格选择幻想或写实风格的环境
以下是一些推荐的HDR贴图资源：
- HDRI Haven（免费）：提供各种高质量的CC0授权HDR贴图
- Poly Haven（免费）：包含HDR、纹理和3D模型的综合资源库
- Texture Haven（部分免费）：提供专业级HDR资源
在实际项目中，我发现使用16位或32位浮点格式的HDR贴图能够获得最佳的光照效果，特别是在高对比度场景中。对于性能敏感的应用，可以考虑使用HDR贴图的LDR版本，虽然会损失一些动态范围，但能显著减少内存占用。
