dat-gui cdn
dat-gui github

// dat gui
var controls = {
    distance: 0,
    color: '#ffffff',
    
    // 當 value 為 boolean 時 dat.GUI 面板會生成 checkbox
    playOrNot: true,
    
    // 當 value 為 function 時， dat.GUI 面板會生成可以觸發該 function 的按鈕
    oneStep: function(){
        box.update();
    },
};

// 生成 dat.GUI 面板
var gui = new dat.GUI();


// 透過 gui.add 將指定的 value 呈現在 dat.GUI 面板上

// 指定 controls 物件裡的 distance 呈現在 dat.GUI 面板上
// distance 可在 0-1000 之間調整
// listen 表示當 controls 物件裡的 distance 變更時 dat.GUI 也會同步自動變更
// onChange 表示當 dat.GUI 變更時（例如我們拖曳調整 dat.GUI 面板數的值大小時），就觸發指定 function
gui.add(controls,'distance', 0, 1000).listen().onChange(function(value) {
    box.distance = value
});

// addColor 會幫我們生成 color picker 在 dat.GUI 面板上
gui.addColor(controls,'color').listen().onChange(function(value) {
    box.color = value
});

gui.add(controls,'playOrNot').listen().onChange(function(value) {
    box.startOrNot = value
});

gui.add(controls,'oneStep').listen().onChange(function(value) {});

如果上述理解有誤，還懇請路過的俠士，順手解惑做公益，感恩的心 ε= ᕕ( ᐛ )ᕗ