在 Three.js 中，环境贴图用于渲染背景和影响物体的光照、反射效果。不同类型的环境贴图文件适用于不同的渲染需求。
🌍 1. 常见环境贴图格式
格式 |
优点 |
缺点 |
适用场景 |
HDR（.hdr） |
高动态范围，真实反射 |
文件较大，需处理动态范围 |
逼真的光照、PBR 材质 |
EXR（.exr） |
更高精度 HDR，支持 32-bit |
文件大，加载慢 |
高质量渲染、电影级别光照 |
Cubemap（6 张 PNG/JPG） |
兼容性好，易处理 |
精度低，可能有接缝 |
低性能需求的环境光 |
Equirectangular（1 张 PNG/JPG） |
易于加载，支持大多数浏览器 |
8-bit 色彩范围受限 |
一般背景、快速加载 |
🛠 2. 加载环境贴图的方法
1️⃣ Equirectangular 贴图（.hdr / .jpg / .png）
📌 适用于：HDRLoader 处理 HDR，TextureLoader 处理普通图片。
🌟 代码：
import { TextureLoader, EquirectangularReflectionMapping } from 'three'
// 加载 equirectangular 贴图
const textureLoader = new TextureLoader()
textureLoader.load('textures/environment.jpg', (texture) => {
texture.mapping = EquirectangularReflectionMapping
scene.background = texture
scene.environment = texture
})📌 优点： 简单、兼容性好，适用于 8-bit 贴图。
2️⃣ HDR 贴图（.hdr）
📌 适用于： 高动态范围贴图，需 RGBELoader 处理。
🌟 代码：
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js'
// 加载 HDR 贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('textures/environment.hdr', (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping
scene.background = texture
scene.environment = texture
})📌 建议： 搭配 PMREMGenerator 提高 PBR 渲染质量。
3️⃣ EXR 贴图（.exr）
📌 适用于： 超高质量 HDR 渲染。
🌟 代码：
import { EXRLoader } from 'three/examples/jsm/loaders/EXRLoader.js'
import { PMREMGenerator } from 'three'
// EXRLoader
const exrLoader = new EXRLoader()
const pmremGenerator = new PMREMGenerator(renderer)
pmremGenerator.compileEquirectangularShader()
exrLoader.load('textures/environment.exr', (texture) => {
texture.mapping = THREE.EquirectangularReflectionMapping
const envMap = pmremGenerator.fromEquirectangular(texture).texture
scene.background = envMap
scene.environment = envMap
texture.dispose()
pmremGenerator.dispose()
})📌 优势： 更精准的高光效果，适用于高级 PBR 渲染。
4️⃣ Cubemap 贴图（6 张 PNG/JPG）
📌 适用于： 低精度环境光或兼容旧设备。
🌟 代码：
import { CubeTextureLoader } from 'three'
// 加载 Cubemap
const cubeTextureLoader = new CubeTextureLoader()
const envMap = cubeTextureLoader.load([
'textures/px.jpg', 'textures/nx.jpg',
'textures/py.jpg', 'textures/ny.jpg',
'textures/pz.jpg', 'textures/nz.jpg'
])
scene.background = envMap
scene.environment = envMap📌 优点： 兼容性好，适用于低性能设备。
🔥 3. 性能优化（推荐）
优化技巧 |
方法 |
使用 |
预计算环境光，提高渲染质量，减少噪点 |
降低分辨率 |
减少 HDR/EXR 贴图大小，提高加载速度 |
使用 CubeTexture 代替 HDR |
Cubemap 加载更快，适用于低端设备 |
📌 推荐：
const pmremGenerator = new THREE.PMREMGenerator(renderer)
pmremGenerator.compileEquirectangularShader()✨ 总结
文件格式 |
适用场景 |
加载方式 |
推荐优化 |
.hdr |
高动态范围光照 |
|
|
.exr |
电影级渲染 |
|
|
.jpg / .png |
低端设备 |
|
直接加载 |
Cubemap（6 张图） |
兼容旧设备 |
|
预处理压缩 |
🚀 最佳实践
- 如果 需要高质量光照 ➝ EXR / HDR +
PMREMGenerator - 如果 只要简单的背景 ➝ JPG / PNG
- 如果 需要兼容性和性能 ➝ Cubemap
💡 选择合适的环境贴图格式，优化渲染质量和性能！🔥