threejs:vue里dat GUI的简单用法

1、引入datGUI

datGUI并不是threejs自带的，需要自己另外下载。

2、定义datGUI的控制器和添加到控制器里的对象

3、对以上两个变量进行初始化

CtrlObj是一个对象类型，那么要记得，对象类型的数据由key和value组成，如果key比较少，可以写成上图的形式，如果key比较多，建议用.keyname的形式，如下图，0.01就是key的默认值。

 4、添加控制器对象到控制器

引号里的名字必须跟对象的key一致，后面的两个数据是设置最大值和最小值。

 5、实现datGUI里的数据变化

进行了以上4步，我们可以右上角已经出现控制器了，接下来我们来实现控制器的 *** 作，比如我们拖动rotationSpeed，改变旋转速度，几何体的速度为什么就会变化了？

其实是animate方法里，让几何体的旋转等于控制器对象rotationSpeed这个key的value。

  6、控制器对象的属性除了可以为数值外，还可以为很多其他类型，甚至可以为一个方法。

 7、添加颜色选择器

只需要在datGUI初始化里添加即可，不需要在动画方法里加

 

 

 完整代码如下：

最终效果：

datGUI演示