dat.GUI介绍

 

一、基本介绍

1，什么是 dat.GUI?

dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。

• GitHub 主页：https://github.com/dataarts/dat.gui

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1785.html

2，使用步骤

（1）首先在页面的  标签中添加这个库。

1

（2）定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。

1 2 3 4

var controls = new function () {     this.rotationSpeed = 0.02;     //...... };

（3）接下来需要将这个 JavaScript 对象传递给 dat.gui 对象，并设置各个属性的取值范围。

1 2 3

var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5); //......

（4）最后当用户对 dat.GUI 控件进行操作时，controls 里的属性值也会同步修改。我们在程序中直接引用这个属性值就好了。

 

3，简单的使用样例

（1）效果图

页面打开后场景中央会有一个不断旋转的立方体。默认旋转速度是 0.02。

我们使用 dat.GUI 添加一个控制面板，里面只有一个控制项，用于实时修改方块的旋转速度（可以填值，也可以左右拖动调整）

        

 

（2）样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99

"utf-8">                       "WebGL-output">

 

二、各种类型的控件

dat.GUI 会根据我们设置的属性类型来渲染使用不同的控件。

 

1，数字类型（Number）

1 2 3 4

//存放有所有需要改变的属性的对象 var controls = new function () {     this.rotationSpeed = 0.02; };

 

（1）如果没有设置限制条件，则为一个 input 输入框。

1 2	var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed');

 

（2）可以设置最小值最大值范围，则显示为 slider 滑块组件（当然右侧还是有 input 输入）

1 2	var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', 0, 0.5);

（3）还可以只单独限制最小值或者最大值，这个同样为一个 input 输入框。

1 2 3

var gui = new dat.GUI(); gui.add(controls, 'rotationSpeedX').min(0); gui.add(controls, 'rotationSpeedY').max(10);

（4）可以配合 step 限制步长。

1 2 3 4

var gui = new dat.GUI(); gui.add(controls, 'rotationSpeedX').step(0.5); gui.add(controls, 'rotationSpeedY', 0, 3).step(0.5); gui.add(controls, 'rotationSpeedZ').max(10).step(0.5);

 

（5）如果数字只是有限的几种固定值，那还可以使用下拉框的形式。

1 2	var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed', { Stopped: 0, Slow: 0.02, Fast: 5 });

 

2，字符串类型（String）

（1）默认情况下就是一个 input 输入框。

1 2 3 4 5 6

var controls = new function () {     this.site = "hangge.com" };   var gui = new dat.GUI(); gui.add(controls, 'site');

 

（2）只是有限的几种固定值，那还可以使用下拉框的形式。

1 2 3 4 5 6

var controls = new function () {     this.site = "hangge.com" };   var gui = new dat.GUI(); gui.add(controls, 'site', [ 'google.com', 'hangge.com', '163.com' ]);

 

3，布尔类型（Boolean ）

使用复选框（Checkbox）的形式控制。

1 2 3 4 5 6

var controls = new function () {     this.visible = true };   var gui = new dat.GUI(); gui.add(controls, 'visible');

 

4，自定义函数（Function）

使用按钮（button）的形式控制，点击按钮会调用相应的方法。

1 2 3 4 5 6 7 8

var controls = new function () {     this.hello = function() {       alert("欢迎访问 hangge.com");     } };   var gui = new dat.GUI(); gui.add(controls, 'hello');

 

5，颜色值

dat.GUI 一共提供了 4 种类型颜色输入控制：CSS、RGB、RGBA、Hue（注意：颜色使用 addColor 方法添加控件）

1 2 3 4 5 6 7 8 9 10 11 12

var controls = new function () {     this.color0 = "#ffae23"; // CSS string     this.color1 = [0, 128, 255]; // RGB array     this.color2 = [0, 128, 255, 0.3]; // RGB with alpha     this.color3 = {h: 350, s: 0.9, v: 0.3}; // Hue, saturation, value };   var gui = new dat.GUI(); gui.addColor(controls, 'color0'); gui.addColor(controls, 'color1'); gui.addColor(controls, 'color2'); gui.addColor(controls, 'color3');

 

三、事件监听

对于面板中的每一个控制项，我们都可以设置 onChange 和 onFinishChange 监听事件。

（1）样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var controls = new function () {     this.speed = 1; };   var gui = new dat.GUI(); var speedController = gui.add(controls, 'speed', 0, 5);   //对应控制项值改变时响应（比如拖动滑块过程中） speedController.onChange(function(value) {   console.log("onChange:" + value) });   //对应控制项值修改完毕响应 speedController.onFinishChange(function(value) {   console.log("onFinishChange" + value) });

（2）我们拖动滑块改变值，控制台输出如下：

 

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1785.html