是一个可以在运行时修改 Javascript 对象属性的界面库。相信用过 的同学对它一定不会陌生，three.js 的很多示例都用到了这个轻量的界面库修改三维场景的属性。我也是因为接触到 three.js 才打算学习一下这个库的。
下面通过一组例子总结 lil-gui 的基本用法
用这个库之前，需要实例化它的对象
上面的例子用到了 gui.add 方法，该方法的函数签名如下所示：
gui.add(object, property, [$1], [max], [step])
object: 目标对象
property：目标对象上要修改的属性
$1：数值属性的最小值或可选值列表
max: 数值属性的最大值
step：数值属性的步进
lil-gui 会根据要修改属性的数据类型选择合适的界面控件，主要数据类型对应的控件
- 布尔值：checkbox
- 字符串：text field
- 数值：number field
- 函数：button
同时设置数值的最大值和最小值，lil-gui会提供一个滑块
下拉列表中的可选值可以用数组或者对象组织。用对象组织时，界面上显示的是对象中的键值。
lil-gui 可以识别 CSS字符串 或 十六进制 数值表示的颜色，通过 addColor() 方法创建颜色选择器
可以通过 对象 或 数组 两种形式指定颜色初始值
默认颜色分量在 [ 0, 1 ] 区间内，可以设置 addColor 方法的第三个参数将颜色分量扩展到 [ 0, 255 ]
addColor 方法的函数签名如下所示
addColor( object, property, rgbScale=1 )
object：目标对象
property：目标对象中作为颜色的属性名称
rgbScale：颜色通道的最大值，默认为1
在界面上，将 obj 对象的 x、y、z 属性在界面上组织成名称为 Position 的可折叠分组
有两种属性变化监听事件：onChange 和 onFinishChange 。它们的区别是 onChange 修改立即触发；onFinishChange 修改并失去焦点后触发。
onChange :
onFinishChange :
除了针对对象上具体属性的监听方式外，lil-gui 还提供全局的监听方式。任何属性的变化都会触发它们。
全局 onChange :
全局 onFinishChange :
通过界面外的方式修改了属性值，lil-gui并不会做出响应。这时可以用 listen 方法监听属性值在界面外的变化，并在界面上更新
gui.save 将当前界面上的属性值保存到一个对象中，以 JSON 对象的形式存储
界面上有相同的属性名时，用 gui.save 会报名称冲突的错误。这时可以用 name 方法改名可以避免这个问题
默认情况下面板是位于页面右上角的，实际应用中可能由于界面元素冲突需要调整面板的位置。
在实例化的时候设置 autoPlace 属性为 false，然后指定 CSS 进行修改即可