【Three.js】知识梳理十二：Three.js PBR材质

本文将详细介绍Three.js中的PBR（Physically Based Rendering）材质，包括PBR的基本概念、适用场景、PBR材质的构建以及一些高级应用技巧。

1. PBR（Physically Based Rendering）基本概念

PBR，即Physically Based Rendering，是一种基于物理原理的渲染技术，旨在模拟真实世界中的光照和材质表现。Three.js中的PBR材质主要包括THREE.MeshStandardMaterial和THREE.MeshPhysicalMaterial，基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射...)，它们能够更准确地模拟光照和材质之间的相互作用，为场景提供更加真实感的渲染效果。

2. 适用场景

PBR材质适用于对真实感渲染效果有较高要求的场景，例如：

• 游戏场景：游戏中的角色、道具等元素可以通过PBR材质实现更真实的光照和材质效果。
• 产品展示：三维产品展示中，PBR材质可以更真实地展示产品的外观、纹理和细节。
• 虚拟现实：VR场景中，PBR材质有助于提高用户的沉浸感和真实感。

3. PBR材质的构建

在Three.js中，PBR材质的构建涉及以下几个方面：

3.1 基本属性.color，.metalness，.roughness

PBR材质的基本属性包括颜色、金属度、粗糙度等。例如：

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.5,
  roughness: 0.5
});

金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。

粗糙度属性.roughness表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射，0.0表示平滑的镜面反射,1.0表示完全漫反射。

3.2 纹理贴图

PBR材质支持多种纹理贴图，如漫反射贴图、金属度贴图、粗糙度贴图、法线贴图等。例如：

const loader = new THREE.TextureLoader();
const diffuseTexture = loader.load('path/to/diffuse.png');
const metalnessTexture = loader.load('path/to/metalness.png');
const roughnessTexture = loader.load('path/to/roughness.png');
const normalTexture = loader.load('path/to/normal.png');
​
const material = new THREE.MeshStandardMaterial({
  map: diffuseTexture,
  metalnessMap: metalnessTexture,
  roughnessMap: roughnessTexture,
  normalMap: normalTexture
});

3.3 环境光遮蔽

为了更好地模拟环境光的影响，PBR材质还支持环境光遮蔽贴图。例如：

const aoTexture = loader.load('path/to/ao.png');
​
const material = new THREE.MeshStandardMaterial({
  aoMap: aoTexture
});

4. 高级应用技巧

4.1 清漆度.clearcoat

清漆度是一种模拟表面光洁度的属性，用于实现汽车漆、瓷器等具有光滑表面的材质。在Three.js中，可以使用THREE.MeshPhysicalMaterial设置清漆度属性。例如：

const material = new THREE.MeshPhysicalMaterial({
  clearcoat: 1.0,
  clearcoatRoughness: 0.1
});

典型案例（汽车外壳PBR材质设置）：

const mesh = gltf.scene.getObjectByName('汽车外壳');
mesh.material = new THREE.MeshPhysicalMaterial({
        color: mesh.material.color, //默认颜色
        metalness: 0.9,//车外壳金属度
        roughness: 0.5,//车外壳粗糙度
        envMap: textureCube, //环境贴图
        envMapIntensity: 2.5, //环境贴图对Mesh表面影响程度
})  

4.2 各向异性.Anisotropy

各向异性是一种模拟材质在不同方向上光照反射特性不同的属性，用于实现金属刷痕、木纹等具有方向性纹理的材质。在Three.js中，可以使用THREE.MeshPhysicalMaterial设置各向异性属性。例如：

const anisotropyTexture = loader.load('path/to/anisotropy.png');
​
const material = new THREE.MeshPhysicalMaterial({
  anisotropy: 0.8,
  anisotropyMap: anisotropyTexture
});

4.3 透明度.Transparency

透明度是一种模拟材质透明程度的属性，在Three.js中，可以使用THREE.MeshPhysicalMaterial设置透明度属性。例如：

const material = new THREE.MeshPhysicalMaterial({
  transparent: true,
  opacity: 0.5
});

4.4 透光率(透射度).transmission

为了更好的模拟玻璃、半透明塑料一类的视觉效果，可以使用物理透明度.transmission属性代替Mesh普通透明度属性.opacity。使用.transmission属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。例如：

const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
    transmission: 1.0, //玻璃材质透光率，transmission替代opacity 
})

4.5 折射率.ior

非金属材料的折射率从1.0到2.333。默认值为1.5。例如：

new THREE.MeshPhysicalMaterial({
    ior:1.5,//折射率
})

典型案例（玻璃材质设置）：

const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
    metalness: 0.0,//玻璃非金属 
    roughness: 0.0,//玻璃表面光滑
    envMap:textureCube,//环境贴图
    envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
    transmission: 1.0, //玻璃材质透光率，transmission替代opacity 
    ior:1.5,//折射率
})

附送250套精选项目源码

源码截图

 源码获取：关注公众号「码农园区」，回复 【源码】，即可获取全套源码下载链接