是一个可以在运行时修改 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 进行修改即可