dat.GUI

dat.GUI的大致源碼我並沒有認真看，只知道他似乎是使用了一個controllers.factory來判斷你所加入的Controller是哪一類型，anyway，這裡就整理下使用方式。

基本上使用相當簡單，你只要把物件丟給add()就能夠判斷並控制你的數值，在這裡以json格式為例，建構dat.GUI()後使用add()他就能判定你所使用的Controller或Folder了。

var test = {
    //想要丟給gui的參數與初始值
    text : 'text',
    speed : 0.8,
    boolean : false,
    slider1: 2,
    slider2: 0,
    slider3: 5,
    slider4: 5,
    menu:'menu',
    color0 : "#ffae23", // CSS string
    color1 : [ 0, 128, 255 ], // RGB array
    color2 : [ 0, 128, 255, 0.3 ], // RGB with alpha
    color3 : { h: 350, s: 0.9, v: 0.3 }, // Hue, saturation, value
};
gui = new dat.GUI();
gui.add(test, 'text');//新增text
var slider = gui.addFolder('slider');//新增Folder
    slider.add(test, 'slider1').step(5); // 增加量
    slider.add(test, 'slider2', -5, 5); // 上線和下限
    slider.add(test, 'slider4').min(0).step(0.25); // Mix and match
    slider.add(test, 'slider4').min(0).max(10).step(0.25); // Mix and match
gui.add(test, 'menu', [ 'test1', 'test2', 'test3' ] );//下拉選單
gui.add(test, 'boolean');//布林值
var color = gui.addFolder('color');
    color.addColor(test, 'color0');
    color.addColor(test, 'color1');
    color.addColor(test, 'color2');
    color.addColor(test, 'color3');
color.open();//Folder初始是打開的
slider.close(); //Folder初始是關閉的

如何更變數值？

以json為例，使用onChange()：

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( {color:0xffffff} );
cube = new THREE.Mesh(geometry,material);
cube.rotation.z+=10;
cube.rotation.x+=10;
scene.add(cube);

var test = {
    //想要丟給gui的參數與初始值
    cube : 'cube',
    scale_x: 1,
    scale_y: 1,
    scale_z: 1,
};
gui = new dat.GUI();
gui.add(test, 'cube');//新增text
var scale = gui.addFolder('scale');
var s_x = scale.add(test,'scale_x').min(0).max(5).step(0.1);
var s_y = scale.add(test,'scale_y').min(0).max(5).step(0.1);
var s_z = scale.add(test,'scale_z').min(0).max(5).step(0.1);
s_x.onChange(function(x){ cube.scale.x = x;});
s_y.onChange(function(y){ cube.scale.y = y;});
s_z.onChange(function(z){ cube.scale.z = z;});

以物件為例：

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( {color:0xffffff} );
cube = new THREE.Mesh(geometry,material);
cube.rotation.z+=10;
cube.rotation.x+=10;
cube.name = "cube1";
scene.add(cube);

gui = new dat.GUI();
gui.add(cube, 'name');//新增text
var scale = gui.addFolder('scale');
scale.add(cube.scale,'x').min(0).max(5).step(0.1);
scale.add(cube.scale,'y').min(0).max(5).step(0.1);
scale.add(cube.scale,'z').min(0).max(5).step(0.1);

參考資料：

https://www.youtube.com/watch?v=8xFYBjXKYgE&feature=iv&src_vid=PcsJAy-VRts&annotation_id=annotation_2837750455
http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage