Day09 - dat GUI

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) {});

如果上述理解有误，还恳请路过的侠士，顺手解惑做公益，感恩的心 ε= ᕕ( ᐛ )ᕗ