前言
虽然现在很多前端开发的脚手架/工具都附带了热更新的能力，有任何代码或文件的变动，都可以在不刷新网页的前提下实时看到效果。但在很多真实的业务场景中，我们常常要脱离开发环境去修改一些参数并且希望实时看到效果，比如在开发3D网页时，我就经常遇到需要我提供一个参数调整的UI界面，让设计师或产品经理可以更方便更直观的看到不同参数带来的不同的渲染效果。
首先，我们需要一个很轻松就可以搭建起来调试UI的库。
上面这些库都可以让我们很容易就在网页里构建出一套调试UI。你可以根据自己的喜好任选，这里面最为流行的库是dat.GUI，接下来我们也来学习一下如何使用它。
示例
你可以打开以下网址，先感受下dat.GUI是帮我们构建的调试UI是什么样子。
https://ezshine.jnsii.com/cases/smart3d/index.html
当时执行这个项目时，我作为前端工程师和3D建模师合作，但一直苦于在Three.js中并不能完美的还原3D建模师所使用的建模软件中的参数和渲染效果，所以为保证用户看到的效果更接近真实车辆的效果，只好提供一个调试UI，让建模师直接参与Three.js中的参数调节。这帮我省去了大量的沟通时间。
准备工作
打开我们之前的项目代码，有一个红色的立方体在画面正中央，基于这个项目，我们来一步步添加调试UI，创建一些可以实时调试参数的UI控件。
引入dat.GUI
https://github.com/dataarts/dat.gui
我们可以从dat.GUI的仓库build目录下找到dat.gui.min.js文件，下载后复制粘贴到我们的项目中，依然使用<script>标签来引入dat.GUI库
<script type="text/javascript" src="./dat.gui.min.js"></script>
引入后，我们创建这个调试UI对象：
/**
* Debug
*/
const gui = new dat.GUI()
现在我们可以在画布的右上角看到一个空的调试UI面板。
我们可以向调试UI中加入如下不同类型的UI控件：
- Range — 最小最大数值区间控件
- Color — 颜色选择控件
- Text — 文本控件
- Checkbox — 勾选框控件
- Select — 下拉选择控件
- Button — 按钮
- Folder — 抽屉，用于展开或折叠一组控件
现在让我们来用用看
添加控件
我们必须要使用gui.add(...)方法来向调试UI面板中添加控件。该方法的第1个参数是该控件将要影响的对象，第2个参数则是该控件绑定修改的对象属性。
gui.add(mesh.position, 'y')
现在我们能在调试UI面板中看到一个能调整y数值的控件，当我们操作控件修改数值时，我们的立方体也会在y轴上移动到对应的数值坐标。
我们还可以在添加控件时加入最小值，最大值，以及步进值等参数：
gui.add(mesh.position, 'y', - 3, 3, 0.01)
我们还可以采用链式调用的形式：
gui.add(mesh.position, 'y').min(- 3).max(3).step(0.01)
如果太长，也可以加入换行：
gui
.add(mesh.position, 'y')
.min(- 3)
.max(3)
.step(0.01)
默认情况下，控件的名称是影响的变量名，比如y，我们也可以通过name参数来指定控件的名称，这样会更加容易分辨这个调试UI控件到底产生什么影响。
gui
.add(mesh.position, 'y')
.min(- 3)
.max(3)
.step(0.01)
.name('elevation')
添加控件时，dat.GUI会自动检测对象变量的类型，比如检测到我们添加的控件将改变的是一个布尔值的话，就自动显示成checkbox勾选控件了。
gui.add(mesh, 'visible')
我们再添加一个用于修改材质的线框wireframe属性的控件：
gui.add(material, 'wireframe')
颜色控件
要添加颜色改变控件则略微有些麻烦。
大家还记得在Three.js中创建基础材质定义颜色时我们使用的是：
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 })
但当我们需要改变颜色的时候并不能通过material.color = 0xff00ff这样的赋值方式来改变，只能通过material.color.set(...)的形式来改变材质颜色。
所以我们只好创建一个用于改变颜色的中间对象来承载调试UI 控件修改后的颜色值。
const parameters = {
color: 0xff0000
}
另外，添加颜色控件时，我们要用addColor(...)而不是add(...)。
gui.addColor(parameters, 'color')
现在我们能在调试UI面板中看到颜色选择器了，但现在改变颜色后，我们的立方体还不会变色，这是因为parameters.color属性值虽然被改变了，但我们并没有调用material.color.set(...)来改变立方体材质里的颜色。
OK，现在我们添加一个颜色控件的onChange事件，这样在每次颜色值改变事件的回调函数中去调用material.color.set(...)就可以了：
const parameters = {
color: 0xff0000
}
// ...
gui
.addColor(parameters, 'color')
.onChange(() =>
{
material.color.set(parameters.color)
})
还有一个更简单的办法可以不用添加颜色控件的onChange事件，就是在创建材质的时候使用parameters.color：
const material = new THREE.MeshBasicMaterial({ color: parameters.color })
添加按钮控件
在使用gui.add(...)添加调试UI控件时，如果第2个参数传递的是一个函数对象，则会自动在调试UI面板中添加一个按钮，并且在按钮点击的时候调用这个函数。
现在我们加入一个让立方体旋转的函数：
const parameters = {
color: 0xff0000,
spin: () =>
{
gsap.to(mesh.rotation, { duration: 1, y: mesh.rotation.y + Math.PI * 2 })
}
}
并且在调试UI面板中添加一个按钮来调用它：
gui.add(parameters, 'spin')
点击之后，我们的立方体会在1秒内旋转360度。
其他配置项
默认关闭
在dat.GUI初始化时设置closed参数为true，那么调试UI面板默认将处于关闭折叠的状态。
const gui = new dat.GUI({ closed: true })
面板宽度
也可以通过设置width参数来改变面板的默认宽度：
const gui = new dat.GUI({ width: 400 })
小结
后面的课程中我们还会继续用到dat.GUI来创建调试UI，但本课程中不会再过多讲述这个库的用法了，其实也讲的差不多了：P，因为就是这么简单。
如果你想了解更多可以前往：
