dat.GUI

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

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

使用步骤

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

1	<script type="text/javascript" src="../libs/dat.gui.js"></script>

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

1
2
3
4

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

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

1
2
3

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

最后当用户对 dat.GUI 控件进行操作时，controls 里的属性值也会同步修改。我们在程序中直接引用这个属性值就好了。
上述原文出自：www.hangge.com 原文链接：https://www.hangge.com/blog/cache/detail_1785.html

dat

GUI: ? GUI(pars)
color: {math: {…}, Color: ?, interpret: ?}
controllers: {Controller: ?, BooleanController: ?, OptionController: ?, StringController: ?, NumberController: ?, …}
default: {color: {…}, controllers: {…}, dom: {…}, gui: {…}, GUI: ?}
dom: {dom: {…}}
gui: {GUI: ?}

GUI

属性

.domElement
.autoPlace: true
.closeOnTop: false
.closed: false
.load: Object
.name: undefined
.parent: undefined
.preset: "Default"
.scrollable: true
.useLocalStorage: false
.width: 245

方法

.add(object, property)
添加控制器

.addColor(object, property)
添加颜色控制器

.addFolder(name)
添加文件夹

.close()
关闭

.destroy()
删除

.getRoot()
获取根节点

.getSaveObject()
.hide()
隐藏

.listen(controller)
.onResize()
.onResizeDebounced: ? ()
.open()
打开

.remember()
.remove(controller)
移除控制器

.removeFolder(folder)
移除文件夹

.revert(gui)
.save()
.saveAs(presetName)
.show()
显示

.updateDisplay()
更新显示内容

controllers

Controller: ? Controller(object, property)
BooleanController: ? BooleanController(object, property)
ColorController: ? ColorController(object, property)
FunctionController: ? FunctionController(object, property, text)
NumberController: ? NumberController(object, property, params)
NumberControllerBox: ? NumberControllerBox(object, property, params)
NumberControllerSlider: ? NumberControllerSlider(object, property, min, max, step)
OptionController: ? OptionController(object, property, opts)
StringController: ? StringController(object, property)

Controller

属性

.initialValue = object[property];
.domElement = document.createElement('div');
.object = object;
.property = property;

方法

.getValue()
.isModified()
.onChange(fnc)
.onFinishChange(fnc)
.setValue(newValue)
.updateDisplay()