gui.js可视化插件的使用

gui插件是一个可以与前端界面相结合更改js对象属性值的插件，在平常的前端开发中我们可以使用控制台的打印工具看自己调试的值。但是在进行三维可视化开发时，一个好的角度和材质的取值是非常重要的，而这点用肉眼是看不出来的，最好的方法就是一点一点的在界面上去试，但是没改变一次就重启一个项目，比较麻烦，因此就需要gui.js来修改threejs中一些属性值，可以辅助我们以更快，更直观的方式对模型的材质和位置进行取值和调试。

准备工作

通过以下地址可以下载gui库，也可以使用npm的方式来下载。

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

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

threejs为了使用方便在案例扩展库中也提供了gui.js，这里可以直接使用它。

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

使用GUI对象

创建一个GUI对象，你可以看到浏览器右上角多了一个交互界面。

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

此时如果感觉默认的gui界面不符合我们的要求，可以用.domELement属性来修改gui提供的前端模版。

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

方法.add()

执行gui的.add()方法可以快速创建一个UI交互界面，如拖动条、颜色选择器等。

具体使用方式

//创建一个对象，对象属性的值可以被GUI库创建的交互界面改变
const obj = {
    x: 30,
};
// gui增加交互界面，用来改变obj对应属性
gui.add(obj, 'x', 0, 100);

通过上面的例子我们可以看出.add()方法有几个参数，第一个是对象本身，第二个是对象中的键值，第三和第四给出的取值范围。

照葫芦画瓢，我们通过GUI来改变Mesh网格模型的位置。

gui.add(mesh.position, 'x', 0, 180);

通过以上方式就可以在前端交互界面中更改mesh.position中x的值了，取值范围是0~180；

进阶方法

.name()方法

想上面那样，gui模块会将我们指定的键值当成拖动栏的label标签，此时提示就不是很明显了，如果英语不好的，可能都不知道是什么意思。所以下面gui给出了修改输入框对应label标签的方法。

const gui = new GUI();//创建GUI对象 
gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度');

这时我们虽然修改的是环境光的intensity属性，但是gui生成的前端交互界面展示拖动框对应的label栏就是环境光强度这个词。

.step()步长

步长.step()方法可以设置交互界面每次改变属性值间隔是多少。

gui.add(ambient, 'intensity', 0, 2.0).name('环境光强度').step(0.1);

这时，每拖动一次，ambient的intensity属性增加或减少0.1.

.onChange()

当修改gui界面某个值的时候，.onChange()方法就会执行，这时候你可以根据需要通过.onChange()执行或监控某些代码。

const obj = {
    x: 30,
};
// 当obj的x属性变化的时候，就把此时obj.x的值value赋值给mesh的x坐标
gui.add(obj, 'x', 0, 180).onChange(function(value){
    mesh.position.x = value;
	// 你可以写任何你想跟着obj.x同步变化的代码
	// 比如mesh.position.y = value;
});

更多输入框

gui中除了拖动框还有颜色选择框，下拉框、单选框。

生成颜色选择框

.addColor：修改的数据对应的值为颜色值

const obj = {
    color:0x00ffff,
};
// .addColor()生成颜色值改变的交互界面
gui.addColor(obj, 'color').onChange(function(value){
    mesh.material.color.set(value);
});

方法生成下拉框

.add生成下拉框，就是把原本的拖动框需要给出的数值范围换成数组或对象就好

// 方式1
const obj = {
    scale: 0,
};
// 参数3数据类型：数组(下拉菜单)
gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
    mesh.position.y = value;
});

// 方式2
const obj = {
    scale: 0,
};
// 参数3数据类型：对象(下拉菜单)
gui.add(obj, 'scale', {left: -100,center: 0,right: 100}).name('y坐标').onChange(function (value) {
    mesh.position.y = value;
});

生成单选框

.add()改变属性的对应的数据类型如果是布尔值，那么交互界面就是一个单选框。

const obj = {
    bool: false,
};
// 改变的obj属性数据类型是布尔值，交互界面是单选框
gui.add(obj, 'bool').name('是否旋转');

GUI分组

.addFolder()分组

在开发时，如果我们的要修改的值太多了，可以使用.addFolder()的方法进行分组。

.addFolder()返回的子文件夹对象，和gui()实例化出来的对象一样，同样具有.add()等方法。

具体示例

const gui = new GUI(); //创建GUI对象 
const obj = {
    color: 0x00ffff,// 颜色
};
// 创建材质子菜单
const matFolder = gui.addFolder('第一组');
// 默认收起组的面板
matFolder.close();
// 颜色color
matFolder.addColor(obj, 'color').onChange(function(value){
   // 这里可以对Three中的模型对象进行操作
    console.log(value)
});


// 材质高光颜色specular
matFolder.addColor(obj, 'specular').onChange(function(value){
   // 这里修改指定材质的高光颜色
    material.specular.set(value);
});

通过上面的案例，就可以将一个组创建出来了，我们还可以通过代码，来控制一组输入框是收起还是展开，使用.close()方法和.open()方法即可。

// 创建材质子菜单
const matFolder = gui.addFolder('第一组');
// 收起组面板
matFolder.close()
// 展开组面板
matFolder.open()

组对象之间可以有套娃操作，一组面板中还有一组面板。具体使用方式如下：

// 平行光子菜单
const dirFolder = gui.addFolder('平行光');
//子菜单的子菜单
const dirFolder2 = dirFolder.addFolder('位置');