在開發互動式網頁裡，可以外掛 Dat.gui 直接調整程式內部的變數，便於開發與測試

起手式

var gui = new dat.GUI();
var controller = gui.add( 物件 , 屬性名稱 , [最⼩ ] , [ 最⼤ ]) //會傳回controller物件

controller.onChange(function(value) { // 操作中數據
    console.log("controller onChange:" + value)
});
controller.onFinishChange(function(value) { // 結束操作數據
    console.log("controller onChange:" + value)
});

Demo

寫一個簡易 Demo
可改變數值(可限制數值範圍)
可改變色票

 gui.addColor( 物件 , 屬性名稱 ) //會傳回controller物件

進階設定

.updateDisplay(); //將數值更新回控制
.listen(); //數值改變會同步

動畫互動網頁特效入門（JS/CANVAS）

手把手教你使用dat.gui