控件解读

　　Dat。gui使用教程：Dat。gui是一个GUI组件，他可以为你的demo提供参数的设置。并且很容易上手。
　　基础用法
　　引入js文件
　　lt；scripttypetextjavascriptsrchttps：raw。github。comdataartsdat。guimasterbuilddat。gui。min。jsgt；lt；scriptgt；
　　初始化配置
　　varOptionsfunction（）｛
　　this。messagedat。gui；
　　this。speed0。8；
　　this。displayOutlinefalse；
　　this。buttonfunction（）｛｝；
　　｝；
　　window。onloadfunction（）｛
　　varoptionsnewOptions（）；
　　varguinewdat。GUI（）；
　　gui。add（options，message）；
　　gui。add（options，speed，5，5）；
　　gui。add（options，displayOutline）；
　　gui。add（options，button）；
　　｝；
　　这里，在你的配置项：FizzyText里，GUI会根据你设置的属性类型来渲染不同的控件
　　如果是Number类型则用slider来控制
　　如果是Boolean类型，则用Checkbox来控制
　　如果是Function类型则用button来控制
　　如果是String类型则用input来控制
　　16
　　控制输入限制
　　控制限制输入项输入类型以及值
　　gui。add（text，noiseStrength）。step（5）；增长的步长
　　gui。add（text，growthSpeed，5，5）；最大、最小值
　　gui。add（text，maxSize）。min（0）。step（0。25）；最大值和步长
　　文本输入项
　　gui。add（text，message，〔pizza，chrome，hooray〕）；
　　下拉框形式选择文案
　　gui。add（text，speed，｛Stopped：0，Slow：0。1，Fast：5｝）；
　　选项组
　　可以使用文件夹给选项分组
　　varguinewdat。GUI（）；
　　varf1gui。addFolder（FlowField）；
　　f1。add（text，speed）；
　　f1。add（text，noiseStrength）；
　　varf2gui。addFolder（Letters）；
　　f2。add（text，growthSpeed）；
　　f2。add（text，maxSize）；
　　f2。add（text，message）；
　　f2。open（）；
　　26
　　颜色值的输入
　　提供4种类型颜色输入控制
　　CSS
　　RGB
　　RGBA
　　Hue
　　varOptionsfunction（）｛
　　this。color0ffae23；CSSstring
　　this。color1〔0，128，255〕；RGBarray
　　this。color2〔0，128，255，0。3〕；RGBwithalpha
　　this。color3｛h：350，s：0。9，v：0。3｝；Hue，saturation，value
　　｝；
　　window。onloadfunction（）｛
　　varoptionsnewOptions（）；
　　varguinewdat。GUI（）；
　　gui。addColor（options，color0）；
　　gui。addColor（options，color1）；
　　gui。addColor（options，color2）；
　　gui。addColor（options，color3）；
　　｝；
　　36
　　存储
　　可以使用remember方法开启GUI的存储模式，而且可以分组存储
　　varOptionsfunction（）｛
　　this。color0ffae23；CSSstring
　　｝；
　　window。onloadfunction（）｛
　　varoptionsnewOptions（）；
　　varguinewdat。GUI（）；
　　gui。remember（options）；
　　gui。addColor（options，color0）；
　　｝；
　　当然你也可以把之前保存的数据在初始化时导入
　　varOptionsfunction（）｛
　　this。number1；
　　｝；
　　window。onloadfunction（）｛
　　varoptionsnewOptions（）；
　　varguinewdat。GUI（｛
　　load：｛
　　preset：kkkkk，
　　closed：false，
　　remembered：｛
　　Default：｛
　　0：｛
　　number：4
　　｝
　　｝，
　　kkkkk：｛
　　0：｛
　　number：6
　　｝
　　46
　　｝
　　｝，
　　folders：｛｝
　　｝
　　｝）；
　　gui。remember（options）；
　　gui。add（options，number）。min（0）。max（10）。step（1）；
　　｝；
　　可以通过preset配置项指定使用哪个分组的配置
　　事件
　　你可以为每一项设置一个监听事件onChange和onFinishChange
　　varOptionsfunction（）｛
　　this。number1；
　　｝；
　　window。onloadfunction（）｛
　　varoptionsnewOptions（）；
　　varguinewdat。GUI（）；
　　varcontrollergui。add（options，number）。min（0）。max（10）。step（1）；
　　controller。onChange（function（value）｛
　　console。log（onChange：value）
　　｝）；
　　controller。onFinishChange（function（value）｛
　　console。log（onFinishChangevalue）
　　｝）；
　　｝；
　　获取面板DOM对象
　　56