跳到主要内容
3D Playground
Three.js 核心第 11 / 13 节

PBR 与环境光照

高级WebGL

基于图像的光照(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. 1勾选 env as background,把 backgroundBlurriness 调到 0,看看 RoomEnvironment 长什么样。
  2. 2把玻璃的 roughness 调到 0.3,得到磨砂玻璃;再把 dispersion 调高观察彩虹边。
  3. 3把 envIntensity 调到 0,只剩一盏平行光时,三种材质还剩下什么?
  4. 4把车漆的 clearcoat 设为 0,比较有无清漆的反射差别。
运行中