当前位置：首页 > article >正文

Three.js 环境贴图（Environment Map）总结

article 2025/3/21 0:21:12

在 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. 性能优化（推荐）

优化技巧	方法
使用 `PMREMGenerator`	预计算环境光，提高渲染质量，减少噪点
降低分辨率	减少 HDR/EXR 贴图大小，提高加载速度
使用 CubeTexture 代替 HDR	Cubemap 加载更快，适用于低端设备

📌 推荐：

const pmremGenerator = new THREE.PMREMGenerator(renderer)
pmremGenerator.compileEquirectangularShader()

✨ 总结

文件格式	适用场景	加载方式	推荐优化
.hdr	高动态范围光照	`RGBELoader`	`PMREMGenerator`
.exr	电影级渲染	`EXRLoader`	`PMREMGenerator`
.jpg / .png	低端设备	`TextureLoader`	直接加载
Cubemap（6 张图）	兼容旧设备	`CubeTextureLoader`	预处理压缩