dat.gui辅助调试物理材质

上节课在threejs中给大家设置物理材质的时候，通过代码修改参数，然后测试，比较麻烦，可以通过dat.gui.js可视化方式调节材质属性。

引入gui.js库

你可以npm安装dat.gui，也可以直接使用threejs扩展库中准备好的库lil-gui.module.min.js。

文件node_modules，**three/examples/jsm/libs/**目录,你可以找到一个文件lil-gui.module.min.js。

// 引入dat.gui.js的一个类GUI
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';

gihtub地址：https://github.com/dataarts/dat.gui

npm地址：https://www.npmjs.com/package/dat.gui

创建一个GUI对象

创建一个GUI对象，你可以看到浏览器右上角多了一个交互界面，GUI本质上就是一个前端js库。

// 实例化一个gui对象
const gui = new GUI();

.domElement：改变GUI界面默认的style属性

通过.domElement属性可以获取gui界面的HTML元素，那就意味着你可以改变默认的style样式，比如位置、宽度等。

//改变交互界面style属性
gui.domElement.style.right = '0px';
gui.domElement.style.width = '500px';
gui.domElement.style.fontSize = '16px';

.add()方法

执行gui的.add()方法可以快速创建一个UI交互界面，比如一个拖动条，可以用来改变一个JavaScript对象属性的属性值。

格式：.add(控制对象，对象具体属性，其他参数)

const spheremesh = gltf.scene.getObjectByName('球体')
const mat = spheremesh.material;//材质对象
gui.add(mat, 'metalness', 0, 1);
gui.add(mat, 'roughness', 0, 1);
gui.add(mat, 'envMapIntensity', 0, 5);
gui.add(mat, 'transmission', 0, 1);
gui.add(mat, 'ior', 1, 2.333);  

.onChange()方法

.onChange()方法可以监听属性值的变化，当属性值变化时候，可以触发某些代码执行。

gui.addColor(mat, 'color').onChange(function(value){
        spheremesh.material.color.set(value);
});

交互界面命名

gui.add(mat, 'metalness', 0, 1).name('金属度');
gui.add(mat, 'roughness', 0, 1).name('粗糙度');
gui.add(mat, 'envMapIntensity', 0, 5).name('环境贴图系数');
gui.add(mat, 'transmission', 0, 1).name('透射度');
gui.add(mat, 'ior', 1, 2.333).name('折射率');
gui.addColor(mat, 'color').onChange(function(value){
    spheremesh.material.color.set(value);
}).name('颜色');