最近在做可视化方面的毕设，经常要用到dat.gui这个库，经常需要查比较麻烦，干脆自己写一篇攻略来认真梳理一下这个库.

关于dat.gui.js

这个是一个辅助可视化交互的库。官网。主要功能是帮助我们实时修改参数，提高实验或者可视化的效果。它大概长这个样子

最开始接触这个库是在去年学习threejs的时候，后来看到很多可视化的开源项目里都用到了它，这足以证明其魅力。

细数了一下，优点有以下：

好看
api简单易用
功能齐全

基本没有任何缺点，足以应对任何中小型的可视化项目，当然如果是大型的项目最好还是从头造轮子比较合适。

功能

基本使用

1.首先在html开头引入该js文件

<script type="text/javascript" src="../libs/dat.gui.js"></script>

2.然后新建一个对象（字典），用来存储你需要修改的参数。

var ASSETS = new function(){
            this.speed = 0.01;
            this.numParticles = 5000;
            this.age = 40;
            this.lineWidth = 3;
            this.opacityDelta = 0.1;
            this.frequency = 12;
            this.acceleratable = false;
        };

3.新建gui对象，并且加入之前对象里的参数

gui.add(ASSETS,'age', 20, 100)

add函数第一个参数表示对象，第二个是对象的属性，第三个，第四个是该对象浮动的范围

4.得到结果

各种类型的控件

1.数字型

无范围，则表现为input

gui.add(ASSETS,'age)

有范围，则表现为滑块

gui.add(ASSETS,'age', 20, 100)

可以设置步长

gui.add(ASSETS,'age', 20, 100).step(1)

如果数字类型有限，则可以以下拉框的形式进行选择

gui.add(ASSETS,'age',{'slow':20,'normal':40,'long':60});

2.布尔类型

var ASSETS = new function(){
            this.acceleratable = false;
        };
        
var gui = new dat.GUI();
gui.add(ASSETS, 'acceleratable');

3.字符串型

var ASSETS = new function(){
            this.str = "str";
        };
        
var gui = new dat.GUI();
gui.add(ASSETS, 'str');

4.自定义函数

var ASSETS = new function(){
            this.hello = function(){
            		xxxxxxxx
            }
        };
        
var gui = new dat.GUI();
gui.add(ASSETS, 'hello');

5.颜色

var ASSETS = new function(){
            this.clr = '#66ccff';
        };
        
var gui = new dat.GUI();
gui.addColor(ASSETS, 'clr');

监听事件

分为两个函数，onChange和onChangeFinish，这两个方法的参数是一个函数

var ASSETS = new function(){
            this.clr = '#66ccff';
            this.redraw = function() {
            		console.log("refresh!");
            }
        };
        
var gui = new dat.GUI();
gui.addColor(ASSETS, 'clr').onChange(ASSETS.redraw);

这样的话，每次选中的值每次发生改动过之后就会触发redraw函数，如果你想要值修改完才触发函数的话可以选用onChangeFinish函数

修改标签项文字

出现在gui中的name如果没有特殊指定的话一般是对象属性的名称，但是我们有时候为了增加辨识度可能想取更简单的名字，但是又不方便直接修改属性的名称，这个时候可以采用一个name函数

var ASSETS = new function(){
            this.clr = '#66ccff';
        };
        
var gui = new dat.GUI();
gui.addColor(ASSETS, 'clr').name('颜色');

控制项分组

即根据功能本身对其进行分类，方便管理

var ASSETS = new function(){
            this.clr = '#66ccff';
            this.redraw = function() {
            		console.log("refresh!");
            }
        };
        
var gui = new dat.GUI();
var folder1 = gui.addFolder();
folder1.addColor(ASSETS, 'clr').onChange(ASSETS.redraw);