dat.GUI

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

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

使用步骤

首先在页面的 标签中添加这个库。 <script type="text/javascript" src="../libs/dat.gui.js"></script> 定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。 var controls = new function () { this.rotationSpeed = 0.02; //...... }; 接下来需要将这个 JavaScript 对象传递给 dat.gui 对象，并设置各个属性的取值范围。 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()