gui调节材质涂层

前面通过Blender介绍过材质涂层相关属性。

本节课给大家介绍，通过gui库可视化调节材质图层相关属性。

回顾：threejs涂层相关属性

基础课程也介绍过threejs物理材质MeshPhysicalMaterial涂层属性.clearcoat和涂层粗糙度.clearcoatRoughness

const material = new THREE.MeshPhysicalMaterial( {
	clearcoat: 1.0,//物体表面清漆层或者说透明涂层的厚度
	clearcoatRoughness: 0.1,//透明涂层表面的粗糙度
} );

threejs和Blender涂层对应关系

• .clearcoat——对应Blender涂层权重选项
• .clearcoatRoughness——对应Blender涂层粗糙度选项

代码测试验证(展厅地面在Blender中命名，方便获取节点测试)

twin.loader.load('./展厅.glb',function(gltf){
    twin.scene.add(gltf.scene)
    const mesh = gltf.scene.getObjectByName('地面');
    console.log('涂层',mesh.material.clearcoat);
    console.log('涂层粗糙度',mesh.material.clearcoatRoughness);
})

gui可视化调节图层属性

const mesh = gltf.scene.getObjectByName('地面');
gui.add(mesh.material,'clearcoat',0,1);
gui.add(mesh.material,'clearcoatRoughness',0,1);