6. 物理网格材质(玻璃)
# 物理网格材质(玻璃)
上节课给大家介绍了标准网格材质MeshStandardMaterial
,下面给大家介绍物理网格材质MeshPhysicalMaterial
。
MeshPhysicalMaterial
是MeshStandardMaterial
的子类,MeshPhysicalMaterial
会继承父类MeshStandardMaterial
的属性,比如金属度、粗糙度。
MeshPhysicalMaterial
有用更多的材质属性,比如透射度(透光率).transmission
、折射率.ior
# 测试
Blender创建一个球体网格模型,然后通过threejs代码创建一个物理材质对象,赋值给这个球体网格模型。
const spheremesh = gltf.scene.getObjectByName('球体')
spheremesh.material = new THREE.MeshPhysicalMaterial({
metalness: 0.0,//玻璃非金属 金属度设置0
roughness: 0.0,//玻璃表面光滑
envMapIntensity:1.0,
transmission:1.0,//透射度(透光率)
ior:1.5,//折射率
})
# 透光率(透射度).transmission
为了更好的模拟玻璃、半透明塑料一类的视觉效果,可以使用物理透明度.transmission
属性代替Mesh普通透明度属性.opacity
。
使用.transmission
属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。
物理光学透明度.transmission
的值范围是从0.0到1.0。默认值为0.0。
const mesh = gltf.scene.getObjectByName('球体')
mesh.material = new THREE.MeshPhysicalMaterial({
transmission: 1.0, //玻璃材质透光率,transmission替代opacity
})
# 折射率.ior
非金属材料的折射率从1.0到2.333。默认值为1.5。
不同材质的折射率,你可以百度搜索。
new THREE.MeshPhysicalMaterial({
ior:1.5,//折射率
})
# 玻璃透光率.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,//折射率
})
# Blender设置透射度导出gltf
上节课,小球网格没有设置透视度.transmission
,只是设置了金属度、粗糙度,threejs加载gltf默认小球网格的材质是MeshStandardMaterial
。
通过Blender设置透射度.transmission
之后,threejs解析gltf模型默认材质MeshPhysicalMaterial
。
const spheremesh = gltf.scene.getObjectByName('球体');
console.log('gltf默认材质',spheremesh.material);
这说明threejs会根据gltf材质属性情况,来决定用什么材质渲染,如果用标准网格材质MeshStandardMaterial
能渲染,就不用MeshPhysicalMaterial
,有些属性比如透射度transmission
,MeshStandardMaterial
没有,就需要MeshPhysicalMaterial
渲染。
# 总结
并不是所有的3D建模软件都支持设置物理材质,即便支持物理材质,也不意味着你导出的gltf模型,能包含该软件,设置的物理材质属性,比如金属度、粗糙度、透射度...
除了物理材质,也有很多建模软件,自带的材质效果,是无法自动导出到threejs的。
建议:能否导出美术建模软件设置的材质效果,一切以实际测试为准。不同软件,同一个软件不同版本,都会有差异。