Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial

MeshStandardMaterial和MeshPhysicalMaterial类是PBR物理材质，可以更好的模拟光照计算，相比较高光网格材质MeshPhongMaterial渲染效果更逼真。
MeshStandardMaterial和MeshPhysicalMaterial两个类基本相似，物理网格材质MeshPhysicalMaterial是MeshStandardMaterial的扩展，MeshPhysicalMaterial可以更好地控制反射率。关于PBR物理材质的大多属性直接查看文档MeshStandardMaterial即可。
PBR物理材质MeshPhysicalMaterial是一个很重要可的材质，如果你想展示一个产品，为了更逼真的渲染效果最好选择该材质，如果游戏为了更好的显示效果可以选择PBR材质MeshPhysicalMaterial，而不是高光材质MeshPhongMaterial。
关于高光网格材质MeshPhongMaterial和PBR物理材质MeshPhysicalMaterial有什么不同可以阅读文章《Three.js次时代和PBR》。阅读这篇文章之前最好先对物理材质有一定的了解MeshPhysicalMaterial。
注意使用物理材质的时候，一般需要设置环境贴图.envMap。
金属度属性.metalness和粗糙度属性.roughness
为了更好的理解PBR物理材质MeshPhysicalMaterial是如何设置一个金属、塑料等材质效果，可以查看文章 《物理材质MeshPhysicalMaterial设置金属效果》
高光网格材质的典型属性是高光颜色.specular和高光亮度.shininess,Threejs物理材质典型的属性是 金属度属性.metalness和粗糙度属性.roughness。
金属度属性.metalness表示材质像金属的程度. 非金属材料，如木材或石材，使用0.0，金属使用1.0，中间没有（通常）. 默认 0.5. 0.0到1.0之间的值可用于生锈的金属外观。如果还提供了粗糙度贴图.metalnessMap，则两个值都相乘。
标准网格材质MeshStandardMaterial：基于物理的标准材料，使用Metallic-Roughness工作流程.
基于物理的渲染（PBR）最近已成为许多3D应用程序的标准, 例如 Unity, Unreal 和 3D Studio Max.
这种方法与旧方法的不同之处在于，不使用近似值来表示光与表面的相互作用，而是使用物理上正确的模型. 我们的想法是，不是在特定照明条件下调整材料以使其看起来更好，而是可以创建一种材料，在所有照明场景下’正确’反应.
在实践中，物理网格材质这比MeshLambertMaterial或MeshPhongMaterial提供了更准确和逼真的结果，代价是计算成本更高一些.
粗糙度属性.roughness材质的粗糙程度. 0.0表示平滑的镜面反射，1.0表示完全漫反射. 默认 0.5. 如果还提供粗糙度贴图.roughnessMap，则两个值相乘.
金属度贴图.metalnessMap和粗糙度贴图.roughnessMap
在讲解Threejs材质的时候，会讲解颜色属性.color和与颜色相对应的颜色贴图.map，讲到高光网格材质MeshPhongMaterial的时候，会提高和高光属性.specular对应的高光贴图.specularMap,类比学习物理材质，物理材质的金属度贴图.metalness对应的是物理材质的金属度属性.metalness，物理材质的粗糙度贴图.roughnessMap对应的是物理材质的粗糙度贴图属性.roughnessMap。
如果一个网格模型Mesh表面都是同一种材质效果，比如金属，比如塑料，没必要使用金属度和粗糙度贴图，直接定义粗糙度和金属度属性即可，如果一个网格模型表面部分区域是金属，部分区域是塑料，部分区域是布料，这种情况下需要粗糙度贴图和金属度贴图。
金属度贴图和粗糙度贴图一般都是3D美术通过PBR次时代流程渲染烘培导出，比如通过substance painter软件，导出PBR物理材质需要的金属度贴图和粗糙度贴图，对于程序员而言直接加载解析就可以。
金属度贴图.metalnessMap纹理的蓝色通道用于改变材料的金属度.
粗糙度贴图.roughnessMap纹理的绿色通道用于改变材料的粗糙度
其它属性和贴图
物理网格材质和其它的网格材质具有一些相同的属性，可以类比记忆学习，具体的信息可以参考Threejs文档MeshStandardMaterial的相关介绍，比如材质发光颜色属性.emissive、发光贴图属性.emissiveMap、环境贴图属性.envMap、环境贴图系数.envMapIntensity、光照阴影贴图属性.lightMap、法线贴图属性.normalMap…
手动设置贴图代码案例
在大多数3D项目中，网格模型的物理材质一般需要3D美术提供颜色贴图map、法线贴图normalMap、金属度贴图roughnessMap、粗糙度贴图metalnessMap四张贴图，环境贴图不同的项目有些时候可以通用，至于其他贴图看情况需要，比如发光贴图emissiveMap，如果有电源灯等发光表面，这时候一般需要美术提供发光贴图emissiveMap。
下面一段代码是通过代码设置一个网格模型的物理材质。
var textureCube = new THREE.CubeTextureLoader()
.setPath(‘./环境贴图/环境贴图4/’)
.load([‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’], function(texture) {
});var texLoader = new THREE.TextureLoader()// 网格材质设置为物理材质
mesh.material = new THREE.MeshPhysicalMaterial({
// color:0xff0000,
// 颜色贴图
map: texLoader.load(“./模型/Mi_Bluetooth_Speaker_BaseColor_blue.png”),
// 如果设置了emissiveMap，自发光贴图，请务必将发光颜色设置为黑色以外的其他颜色
// emissive默认黑色，设置为白色
emissive:0xffffff,
// 发光贴图
emissiveMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_blue_emissive.png”),
// 法线贴图
normalMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Normal.png”),
// 粗糙度贴图
roughnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Roughness.png”),
// 金属度贴图
metalnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Metallic.png”),
// 环境贴图
envMap: textureCube,
// 环境贴图影响程度
envMapIntensity: 0.9,
})
textureCube = new THREE.CubeTextureLoader()
.setPath(‘./环境贴图/环境贴图4/’)
.load([‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’], function(texture) {
});var texLoader = new THREE.TextureLoader()// 网格材质设置为物理材质
mesh.material = new THREE.MeshPhysicalMaterial({
// color:0xff0000,
// 颜色贴图
map: texLoader.load(“./模型/Mi_Bluetooth_Speaker_BaseColor_blue.png”),
// 如果设置了emissiveMap，自发光贴图，请务必将发光颜色设置为黑色以外的其他颜色
// emissive默认黑色，设置为白色
emissive:0xffffff,
// 发光贴图
emissiveMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_blue_emissive.png”),
// 法线贴图
normalMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Normal.png”),
// 粗糙度贴图
roughnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Roughness.png”),
// 金属度贴图
metalnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Metallic.png”),
// 环境贴图
envMap: textureCube,
// 环境贴图影响程度
envMapIntensity: 0.9,
})new THREE.CubeTextureLoader()
.setPath(‘./环境贴图/环境贴图4/’)
.load([‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’], function(texture) {
});var texLoader = new THREE.TextureLoader()// 网格材质设置为物理材质
mesh.material = new THREE.MeshPhysicalMaterial({
// color:0xff0000,
// 颜色贴图
map: texLoader.load(“./模型/Mi_Bluetooth_Speaker_BaseColor_blue.png”),
// 如果设置了emissiveMap，自发光贴图，请务必将发光颜色设置为黑色以外的其他颜色
// emissive默认黑色，设置为白色
emissive:0xffffff,
// 发光贴图
emissiveMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_blue_emissive.png”),
// 法线贴图
normalMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Normal.png”),
// 粗糙度贴图
roughnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Roughness.png”),
// 金属度贴图
metalnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Metallic.png”),
// 环境贴图
envMap: textureCube,
// 环境贴图影响程度
envMapIntensity: 0.9,
})
THREE.CubeTextureLoader()
.setPath(‘./环境贴图/环境贴图4/’)
.load([‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’], function(texture) {
});var texLoader = new THREE.TextureLoader()// 网格材质设置为物理材质
mesh.material = new THREE.MeshPhysicalMaterial({
// color:0xff0000,
// 颜色贴图
map: texLoader.load(“./模型/Mi_Bluetooth_Speaker_BaseColor_blue.png”),
// 如果设置了emissiveMap，自发光贴图，请务必将发光颜色设置为黑色以外的其他颜色
// emissive默认黑色，设置为白色
emissive:0xffffff,
// 发光贴图
emissiveMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_blue_emissive.png”),
// 法线贴图
normalMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Normal.png”),
// 粗糙度贴图
roughnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Roughness.png”),
// 金属度贴图
metalnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Metallic.png”),
// 环境贴图
envMap: textureCube,
// 环境贴图影响程度
envMapIntensity: 0.9,
})‘./环境贴图/环境贴图4/’)
.load([‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’], function(texture) {
});var texLoader = new THREE.TextureLoader()// 网格材质设置为物理材质
mesh.material = new THREE.MeshPhysicalMaterial({
// color:0xff0000,
// 颜色贴图
map: texLoader.load(“./模型/Mi_Bluetooth_Speaker_BaseColor_blue.png”),
// 如果设置了emissiveMap，自发光贴图，请务必将发光颜色设置为黑色以外的其他颜色
// emissive默认黑色，设置为白色
emissive:0xffffff,
// 发光贴图
emissiveMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_blue_emissive.png”),
// 法线贴图
normalMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Normal.png”),
// 粗糙度贴图
roughnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Roughness.png”),
// 金属度贴图
metalnessMap: texLoader.load(“./模型/Mi_Bluetooth_Speaker_Metallic.png”),
// 环境贴图
envMap: textureCube,
// 环境贴图影响程度
envMapIntensity: 0.9,
})
)
.load([‘px.jpg’, ‘nx.jpg’, ‘py.jpg’, ‘ny.jpg’, ‘pz.jpg’, ‘nz.jpg’], function(texture) {
});var texLoader = new TH