推荐：将NSDT场景编辑器加入你的3D工具链

3D工具集：NSDT简石数字孪生

物理材质透光率.transmission

如果你已经掌握上节课内容，可以继续学习物理材质MeshPhysicalMaterial的透光率属性.transmission和折射率属性.ior。

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

折射率.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,//折射率
})

GUI可视化调试PBR材质属性

基本参数和代码设置好以后，就是通过GUI可视化交互界面，调试PBR材质或光源的参数，gui.js库的使用参考入门章节介绍。

const obj = {
    color: mesh.material.color, // 材质颜色
};
// 材质颜色color
matFolder.addColor(obj, 'color').onChange(function (value) {
    mesh.material.color.set(value);
});
// 范围可以参考文档
matFolder.add(mesh.material,'metalness',0,1);
matFolder.add(mesh.material,'roughness',0,1);
matFolder.add(mesh.material,'transmission',0,1);
matFolder.add(mesh.material,'ior',0,3);
matFolder.add(mesh.material,'envMapIntensity',0,10);

上一篇：ThreeJS教程：MeshPhysicalMaterial清漆层 (mvrlink.com)

下一篇：ThreeJS教程：三维软件导出PBR材质属性 (mvrlink.com)