使用dat.GUI实验你的Three.js场景

Three.js中，我们常常需要动态的调节场景中的某些变量，例如场景的灯光强度，颜色，某个物体的摆放位置，它的颜色，大小等等。如果修改一次刷新一次页面那就太麻烦了。于是我们使用dat.GUI()

什么是dat.GUI？

dat.GUI界面图

dat.GUI是由Google开发人员创建的，轻量级的图形用户界面库。大小约为几十KB。它可以用来创建操作控制三维场景的菜单栏，也就是说，这个控件的属性值发生变化，则三维场景中的数据也会发生变化。

dat.GUI结构图

如何使用dat.GUI?

1.引用库文件
<script src = "dat.gui.js" > </script>

2.创建控件对象
即创建一个全局javaScript对象。对象包含一些列的属性，这些属性就是我们想通过 dat.GUI组件来修改的变量。

          var  controls =  {
                     旋转速度：0.01,
                     颜色：material.color.getStyle(),
                     弹跳速度：1
            }

3.创建dat.GUI对象，并将控件对象数据添加到dat.GUI中

             var  gui  =  new dat.GUI(); //创建GUI对象
             var folder = gui.addFolder('菜单');  // 添加文件夹。用于归类属性。默认情况下是不展开的。
             gui.domElement.style = 'position:absolute;top:0px;right:0px';   //设置交互界面位置
              folder.addColor(controls, '颜色');   //添加颜色菜单选项
              folder.add(controls , '缩放系数', 0.1 , 2.5);    //添加缩放系数拖动条菜单选项。并且指定了范围。
               folder.add(controls  , '转速' , {低俗：.0.005, 中速：0.01,高速：0.1});    //添加转速下拉菜单选项
               folder.open();    //文件夹folder下面的菜单选项展开显示

4.在渲染循环中绑定控件对象的属性。

                function  render(){
                      renderer.render(scene , camera); 
                      mesh.scale.x = controls.缩放系数;      //更新缩放系数
                      mesh.rotateY(controls.转速);                //更新转速
                      material.color.setStyle(controls.颜色);     //更新颜色
                      requestAnimationFrame(render);           //请求再次执行渲染函数render
                  }
                 render();

完成！
这种可视化的界面操作实现了数据绑定当我们用鼠标去改变这些属性时，会发现视图中场景的对应属性也发生了变化。

---

附录

• add() 方法
  格式：
  add(空间对象变量名 ,对象属性名, 其他参数)

控件对象属性值的数据类型会影响到GUI对象界面菜单选项的视觉效果和键鼠交互方式。例如到底是鼠标滑动界面，还是下拉菜单等等。
- Number类型: slider。下拉菜单
- Boolean类型： 复选框
- Function类型： 按钮
- String : 文本输入框 ，下拉菜单