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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值