three.js物理网格材质(玻璃)

参考资料：threejs中文网

threejs qq交流群：814702116

three.js物理网格材质(玻璃)

上节课给大家介绍了标准网格材质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的。

建议：能否导出美术建模软件设置的材质效果，一切以实际测试为准。不同软件，同一个软件不同版本，都会有差异。