基于图像的光照(IBL)
真实世界的物体不只被几盏灯照亮,而是被整个环境照亮:天花板、墙壁、窗户都在反射光。IBL 用一张环境贴图代表四面八方射来的光,让 PBR 材质的反射和漫反射都更可信。
RoomEnvironment 是 three.js 自带的一个程序化“摄影棚”场景,不需要下载任何 HDR 文件。PMREMGenerator 把它渲染并预过滤成一组 mip 层级:越粗糙的表面读取越模糊的层级。
js
const pmrem = new THREE.PMREMGenerator(renderer);
scene.environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;设置 scene.environment 后,场景中所有 Standard / Physical 材质都会自动使用它;scene.environmentIntensity 统一调节强度。想把环境也显示为背景,可以设置 scene.background,并用 backgroundBlurriness 让它虚化。
MeshPhysicalMaterial 的额外层
Physical 在 Standard 的 roughness / metalness 之上增加了几层物理效果:
- clearcoat(清漆):在底色之上再加一层透明、光滑的涂层。示例中红色车漆的底层较粗糙,但清漆层依然有锐利的反射。
- transmission(透射):光线穿过物体,用于玻璃、水、宝石。配合
thickness(厚度)、ior(折射率,玻璃约 1.5)、attenuationColor(体积吸收的颜色)和dispersion(色散)。透射需要额外渲染一遍场景,所以背后的彩色灯柱会被折射、扭曲。 - iridescence(虹彩):薄膜干涉,像肥皂泡或油膜那样随角度变色。
iridescenceThicknessRange是薄膜厚度(纳米)。
色调映射(Tone Mapping)
光照计算在 HDR 线性空间中进行,亮度可以远超 1.0;屏幕却只能显示 0–1。色调映射负责把 HDR 压缩到可显示范围:
- None / Linear:直接截断,高光容易过曝成一片白。
- Reinhard、Cineon:较早的经典曲线。
- ACESFilmic:电影感强、对比高,但会让饱和色偏移。
- AgX:对高亮饱和色处理更自然(示例默认)。
- Neutral:尽量保持原始色彩,适合产品展示。
toneMappingExposure 相当于相机曝光。
切换几种 toneMapping,重点观察背后彩色灯柱和红色车漆高光的变化。
核心 API
THREE.PMREMGeneratorRoomEnvironmentscene.environmentscene.environmentIntensityscene.backgroundBlurrinessTHREE.MeshPhysicalMaterialmaterial.clearcoatmaterial.transmissionmaterial.iridescencerenderer.toneMappingTHREE.AgXToneMappingrenderer.toneMappingExposure动手试试
- 1勾选 env as background,把 backgroundBlurriness 调到 0,看看 RoomEnvironment 长什么样。
- 2把玻璃的 roughness 调到 0.3,得到磨砂玻璃;再把 dispersion 调高观察彩虹边。
- 3把 envIntensity 调到 0,只剩一盏平行光时,三种材质还剩下什么?
- 4把车漆的 clearcoat 设为 0,比较有无清漆的反射差别。
还没有输出。console.log 的内容会显示在这里。
运行中