七、Three.jsPBR材质与纹理贴图

1、PBR材质金属度和粗糙度

1、金属度metalness

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

threejs的PBR材质，.metalness默认是0.5,0.0到1.0之间的值可用于生锈的金属外观

new THREE.MeshStandardMaterial({metalness: 1.0,//金属度属性
})

mesh.material.metalness = 1.0;//金属度

2、粗糙度roughness

生活中不同物体表面的粗糙程度不同，比如地面比较粗糙，比如镜子表面就非常非常光滑。

粗糙度roughness表示模型表面的光滑或者说粗糙程度，越光滑镜面反射能力越强，越粗糙，表面镜面反射能力越弱，更多地表现为漫反射。

粗糙度roughness,0.0表示平滑的镜面反射,1.0表示完全漫反射,默认0.5。

new THREE.MeshStandardMaterial({roughness: 0.5,//表面粗糙度
})

mesh.material.roughness = 0.5;//表面粗糙度

3、全部代码

原本样式

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const loader = new GLTFLoader()
const group = new THREE.Group()
loader.load('./build/金属.glb', function (gltf) {gltf.scene.traverse(function (obj) {if(obj.isMesh){obj.material.metalness = 1.0obj.material.roughness = 0.5}})group.add(gltf.scene)
})export default group 

2、环境贴图.envMap(金属效果)

 环境贴图对PBR材质渲染效果影响还是比较大，一般渲染PBR材质的模型，最好设置一个合适的环境贴图。

1、立方体纹理加载器CubeTextureLoader

• TextureLoader返回Texture
• CubeTextureLoader返回CubeTexture

2、CubeTextureLoader加载环境贴图

 所谓环境贴图，就是一个模型周围的环境的图像，比如一间房子，房子的上下左右前后分别拍摄一张照片，就是3D空间中6个角度方向的照片。

// 加载环境贴图
// 加载周围环境6个方向贴图
// 上下左右前后6张贴图构成一个立方体空间
// 'px.jpg', 'nx.jpg'：x轴正方向、负方向贴图  p:正positive  n:负negative
// 'py.jpg', 'ny.jpg'：y轴贴图
// 'pz.jpg', 'nz.jpg'：z轴贴图
const textureCube = new THREE.CubeTextureLoader().setPath('./环境贴图/环境贴图0/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);// CubeTexture表示立方体纹理对象，父类是纹理对象Texture 

3、MeshStandardMaterial环境贴图属性.envMap

实际生活中，一个物体表面，往往会反射周围的环境。人的眼睛看到的东西，往往反射有周围景物，所以three.js渲染模型，如果想渲染效果更好看，如果想更符合实际生活情况，也需要想办法让模型反射周围景物。

MeshStandardMaterial材质的环境贴图属性是.envMap，通过PBR材质的贴图属性可以实现模型表面反射周围景物，这样渲染效果更好。

// 加载环境贴图
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材质环境贴图
})    

obj.material.envMap = textureCube; //设置环境贴图 

1、全部代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const loader = new GLTFLoader()
const group = new THREE.Group()//环境贴图
const textureCube = new THREE.CubeTextureLoader()
.setPath('./build/环境贴图1/')
.load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg']);loader.load('./build/金属.glb', function (gltf) {gltf.scene.traverse(function (obj) {if(obj.isMesh){obj.material.metalness = 1.0obj.material.roughness = 0obj.material.envMap = textureCube}})group.add(gltf.scene)
})export default group 

2、环境贴图反射率.envMapIntensity

MeshStandardMaterial的.envMapIntensity属性主要用来设置模型表面反射周围环境贴图的能力，或者说环境贴图对模型表面的影响能力。具体说.envMapIntensity相当于环境贴图的系数，环境贴图像素值乘以该系数后，在用于影响模型表面。

// envMapIntensity：控制环境贴图对mesh表面影响程度
//默认值1, 设置为0.0,相当于没有环境贴图
obj.material.envMapIntensity = 1.0;

3、粗糙度roughness为0

你可以尝试把粗糙度roughness设置为0，看看模型对环境贴图的反射效果。

obj.material.roughness = 0.0;//完全镜面反射，像镜子一样

4、纹理和渲染器颜色空间一致

//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;   

4、环境贴图2

1、环境贴图作用测试

实际生活中光源照射到一个物体上，这个物体反射出去的光线也会影响其他的物体，环境贴图就是用一种简单方式，近似模拟一个物体周边环境对物体表面的影响。

测试：对于PBR材质，如果threejs三维场景不添加任何光源，物体就是完全黑色的，你可以不添加任何光源，尝试只使用环境贴图，你会发现物体表面的颜色也能看到，这说明环境贴图其实相当于提供了物体周围环境发射或反射的光线。

测试：更换不同明暗的环境贴图，你会发现场景中模型的明暗也有变化。

1、场景环境属性.environment

网格模型可以通过材质的.envMap属性设置环境贴图，如果一个gltf模型中所有的Mesh都要设置环境贴图就需要递归遍历gltf模型，给里面每个Mesh的材质设置.envMap。

loader.load("../工厂.glb", function (gltf) {// 递归遍历批量设置环境贴图gltf.scene.traverse(function (obj) {if (obj.isMesh) { //判断是否是网格模型obj.material.envMap = textureCube; //设置环境贴图}});
})

如果你希望环境贴图影响场景中scene所有Mesh，可以通过Scene的场景环境属性.environment实现,把环境贴图对应纹理对象设置为.environment的属性值即可。

// 环境贴图纹理对象textureCube作为.environment属性值,影响所有模型
scene.environment = textureCube;

2、环境贴图色彩空间编码.encoding

//如果renderer.outputEncoding=THREE.sRGBEncoding;环境贴图需要保持一致
textureCube.encoding = THREE.sRGBEncoding;   

注意：设置环境贴图后可以不设置光源，也可以显示出物体的样式

5、MeshPhysicalMaterial清漆层

MeshPhysicalMaterial和MeshStandardMaterial都是拥有金属度metalness、粗糙度roughness属性的PBR材质，MeshPhysicalMaterial是在MeshStandardMaterial基础上扩展出来的子类，除了继承了MeshStandardMaterial的金属度、粗糙度等属性，还新增了清漆.clearcoat、透光率.transmission、反射率.reflectivity、光泽.sheen、折射率.ior等等各种用于模拟生活中不同材质的属性。

1、清漆层属性.clearcoat

清漆层属性.clearcoat可以用来模拟物体表面一层透明图层，就好比你在物体表面刷了一层透明清漆，喷了点水。.clearcoat的范围0到1，默认0。

const material = new THREE.MeshPhysicalMaterial( {clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
} );

2、清漆层粗糙度.clearcoatRoughness

清漆层粗糙度.clearcoatRoughness属性表示物体表面透明涂层.clearcoat对应的的粗糙度，.clearcoatRoughness的范围是为0.0至1.0。默认值为0.0。

const material = new THREE.MeshPhysicalMaterial( {clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );

3、车外壳PBR材质设置

在设置车外壳清漆层之前，先创建一个MeshPhysicalMaterial材质，并设置好环境贴图、金属度、粗糙度，属性值先根据文档说明给一个大概的值，具体可以通过gui交互界面可视化调试。

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

4、全部代码

 

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const group = new THREE.Group();
const textureCube = new THREE.CubeTextureLoader().setPath('./build/环境贴图1/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])
textureCube.encoding = THREE.sRGBEncoding;const loader = new GLTFLoader();
loader.load('./build/轿车.glb', function (glb) {const mesh = glb.scene.getObjectByName('外壳01')mesh.material = new THREE.MeshPhysicalMaterial({color:mesh.material.color,// color:'red',metalness:1,//金属度roughness:0.5,//粗糙度envMap:textureCube,envMapIntensity:2.0,clearcoat:1.0,//清漆clearcoatRoughness:0.1,//清漆层粗糙度})group.add(glb.scene)
})export default group 

 6、物理材质透光率.transmission

1、透光率(透射度).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 
})

2、折射率.ior

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

不同材质的折射率，你可以百度搜索。

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

3、玻璃透光率.transmission设置

先设置玻璃金属度和粗糙度

const mesh = gltf.scene.getObjectByName('玻璃01')
mesh.material = new THREE.MeshPhysicalMaterial({metalness: 0.0,//玻璃非金属 roughness: 0.0,//玻璃表面光滑envMap:textureCube,//环境贴图envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
})

设置透光率.transmission和折射率.ior。

new THREE.MeshPhysicalMaterial({transmission: 1.0, //玻璃材质透光率，transmission替代opacity ior:1.5,//折射率
})

4、全部代码

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';const group = new THREE.Group();
const textureCube = new THREE.CubeTextureLoader().setPath('./build/环境贴图1/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])
textureCube.encoding = THREE.sRGBEncoding;const loader = new GLTFLoader();
loader.load('./build/轿车.glb', function (glb) {const mesh = glb.scene.getObjectByName('外壳01')mesh.material = new THREE.MeshPhysicalMaterial({color:mesh.material.color,// color:'red',metalness:1,//金属度roughness:0.5,//粗糙度envMap:textureCube,envMapIntensity:2.0,clearcoat:1.0,//清漆clearcoatRoughness:0.1,//清漆层粗糙度})const mesh1 = glb.scene.getObjectByName('玻璃01')mesh1.material = new THREE.MeshPhysicalMaterial({color:mesh1.material.color,metalness:0.0,//金属度roughness:0.0,//粗糙度,envMap:textureCube,envMapIntensity:1.0,transmission:1.0,//透光率ior:1.5,//折射率})group.add(glb.scene)
})export default group