七、threejs学习笔记-PBR材质与纹理贴图
友情链接：threejs 中文文档
目录
1. PBR材质简介
光照模型
网格模型材质整体回顾
2. PBR材质金属度和粗糙度
金属度metalness
粗糙度roughness
3. 环境贴图.enMap
环境贴图反射率.envMapIntensity
场景环境属性.environment
4. MeshPhysicalMaterial清漆层
清漆层属性.clearcoat
清漆层粗糙度.clearcoatRoughness
5. 物理材质透光率transmission
透光率(透射度).transmission
折射率.ior
1. PBR材质简介
所谓PBR就是，基于物理的渲染。Three.js提供了两个PBR材质相关的APIMeshStandardMaterial和MeshPhysicalMaterial，其中MeshPhysicalMaterial是MeshStandardMaterial扩展的子类，提供了更多的功能属性。
光照模型
如果你有初高中最基本的物理光学知识，应该有折射、镜面反射、漫反射等基本光学概念，对于实际生活中的光学问题，Three.js会提供一些的光照模型来模拟物体表面的光照，光照模型就一种模拟光照的计算方法。MeshPhysicalMaterial和MeshLambertMaterial一样都是渲染网格模型的材质，但是他们用的光照模型不同，具体点说就是材质模拟Mesh反射光照的代码算法不同，算法不同，自然模拟光照的真实程度也不同。
网格模型材质整体回顾
- MeshLambertMaterial: Lambert光照模型(漫反射)
- MeshPhongMaterial：Phong光照模型(漫反射、高光反射)
- MeshStandardMaterial和MeshPhysicalMaterial：基于物理的光照模型(微平面理论、能量守恒、菲涅尔反射...)
PBR材质相比MeshLambertMaterial和MeshPhongMaterial可以提供更逼真的、更接近生活中的材质效果，当然也会占用更多的电脑硬件资源。
2. PBR材质金属度和粗糙度
金属度metalness
金属度属性.metalness表示材质像金属的程度, 非金属材料,如木材或石材,使用0.0,金属使用1.0。 threejs的PBR材质，.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观
new THREE.MeshStandardMaterial({
metalness: 1.0,//金属度属性
})粗糙度roughness
粗糙度roughness表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。
粗糙度roughness,0.0表示平滑的镜面反射,1.0表示完全漫反射,默认0.5。
new THREE.MeshStandardMaterial({
roughness: 0.5,//表面粗糙度
})3. 环境贴图.enMap
通过前面学习大家知道，通过纹理贴图加载器TextureLoader的.load()方法加载一张图片可以返回一个纹理对象Texture。
立方体纹理加载器CubeTextureLoader的.load()方法是加载6张图片，返回一个立方体纹理对象TextureLoader。立方体纹理对象CubeTextureLoader的父类是纹理对象Texture。
// 加载环境贴图
const textureCube = new THREE.CubeTextureLoader()
.setPath('./环境贴图/环境贴图0/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);
new THREE.MeshStandardMaterial({
metalness: 1.0,
roughness: 0.5,
envMap: textureCube, //设置pbr材质环境贴图
})
环境贴图反射率.envMapIntensity
MeshStandardMaterial的.envMapIntensity属性主要用来设置模型表面反射周围环境贴图的能力，或者说环境贴图对模型表面的影响能力。
obj.material.envMapIntensity = 1.0;场景环境属性.environment
网格模型可以通过材质的.envMap属性设置环境贴图，如果一个gltf模型中所有的Mesh都要设置环境贴图就需要递归遍历gltf模型，给里面每个Mesh的材质设置.envMap。
// 环境贴图纹理对象textureCube作为.environment属性值,影响所有模型
scene.environment = textureCube;4. MeshPhysicalMaterial清漆层
MeshPhysicalMaterial和MeshStandardMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质，MeshPhysicalMaterial是在MeshStandardMaterial基础上扩展出来的子类，除了继承了MeshStandardMaterial的金属度、粗糙度等属性，还新增了清漆.clearcoat、透光率.transmission、反射率.reflectivity、光泽.sheen、折射率.ior等等各种用于模拟生活中不同材质的属性。
清漆层属性.clearcoat
清漆层属性.clearcoat可以用来模拟物体表面一层透明图层，就好比你在物体表面刷了一层透明清漆，喷了点水。.clearcoat的范围0到1，默认0。
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );
清漆层粗糙度.clearcoatRoughness
清漆层粗糙度.clearcoatRoughness属性表示物体表面透明涂层.clearcoat对应的的粗糙度，.clearcoatRoughness的范围是为0.0至1.0。默认值为0.0。
const material = new THREE.MeshPhysicalMaterial( {
clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );
5. 物理材质透光率transmission
透光率(透射度).transmission
为了更好的模拟玻璃、半透明塑料一类的视觉效果，可以使用物理透明度.transmission属性代替Mesh普通透明度属性.opacity。
使用.transmission属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。
物理光学透明度.transmission的值范围是从0.0到1.0。默认值为0.0。
const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({
transmission: 1.0, //玻璃材质透光率，transmission替代opacity
})
折射率.ior
非金属材料的折射率从1.0到2.333。默认值为1.5。
new THREE.MeshPhysicalMaterial({
ior:1.5,//折射率
})
文章中部分素材选取自Threejs中文网：Three.js中文网