在上一篇文章中，我们学习了如何让物体动起来。参见：Three.js（3）--物体的运动
在这篇文章中，我们将介绍如何调试。
在构建对象和制作动画时，我们经常需要不断尝试。 这个正方形，再大一点，再大一点。 。 它有多大？ 其实你也不知道，所以先修改一下看看效果，如果不合适就继续添加。 移动距离是一样的，速度也是，以后还会有缓动功能，这些都需要不断调试。 总不能改一下代码刷新一次，然后反复+Tab在编译器和浏览器之间切换吧？想太大了
我们需要有一个简单的GUI（图形界面），可以让我们修改一些参数，并实时查看参数变化对场景、动画、颜色和大小的影响。 美好的！ 前人栽树，后人乘荫。 几位大师。 创建了一个名为 dat.GUI 的库。 借助它的帮助，您可以轻松创建简单的界面组件来修改代码中的变量。 ()
那么它是怎样工作的？
1.导入dat.GUI.js
2. dat.GUI支持哪些类型的组件：
以上类型都是肖遥自己命名的，如有错误请指正。 因为没有找到全面的文档，小遥就按照自己的理解来玩。 我们根据上一篇的Demo来介绍几种类型：
我们使用变量来管理需要更改的参数。 分别定义了三个参数：
然后新建一个dat.gui.GUI对象gui，并将三个参数添加到这个图形界面中。
其中，定义了函数，当值改变时，修改立方体的缩放比例。
它是如何运作的？
修改方法，之前每一帧物体位置的变化是固定的，现在我们取两个变量的值。
图形用户界面看起来像这样：
从图中一眼就可以看出三个参数的类型，and 都是数值类型，设置了最大最小值范围，and 都是布尔值，取值为true/false。 好吧，我们来尝试一下：
在本文的Demo中，逍遥给出了每种类型的使用方法，如果需要请查看Demo源码。
效果如下：
有了这样的神器，调试是不是容易多了？ 我们可以利用图形界面调整各种参数，得到一组“创作参数”。 哈哈，这个世界就在你的掌控之中！
dat.GUI就这些了，下面简单说一下Stats，可以用这个控件来显示当前的帧率。 如果你的动画能够保持在 60FPS，性能就会很好，观众看起来和感觉也会很流畅。
看看效果：
工欲善其事，必先利其器。 剑在手，我们继续前行！
