dat.GUI：它是一个轻量级的 JavaScript 控制器库。它使我们可以轻松地即时操作变量和触发函数。我们可以通过设定好的控制器去快捷的修改设定的变量
前言
dat.GUI相对也比较简单主要是一些参数的设定，不同的参数达到不同的效果。本篇将随便实现几种常用的效果
一、实现效果
二、实现步骤
1.引入/下载库
npm install dat.gui --save
2.相关代码演示
//代码：
/**
* 使用dat.gui工具
*/
const gui = new dat.GUI({
name: "lightGui", //GUI的名称
});
/**
* 控件对象
* 属性值：
* Number类型——slider、下拉菜单...
Boolean类型——复选框
Function类型——按钮
String——文本输入框、下拉菜单
*/
let guiControls = {
name: "acqui",
speed: 0.5,
color1: "#FF0000", // CSS string
color2: [0, 128, 255], // RGB array
color3: [0, 128, 255, 0.3], // RGB with alpha
color4: {
h: 350, s: 0.9, v: 0.3 }, // Hue, saturation, value
test: "",
test2: "",
fn: function () {
alert("自定义函数");
},
gender:true
};
/**
* 可以控制字符类型或数字
* 语法1：gui.add(控件对象变量名，对象属性名，其它参数)
*/
gui.add(guiControls, "name");
// 缩放区间[0,100],变化步长10
gui.add(guiControls, "speed", 0, 100, 10);
// 创建一个下拉选择
gui
.add(guiControls, "test", {
低速: 0.005, 中速: 0.01, 高速: 0.1 })
.name("转速");
gui.add(guiControls, "test2", ["低速", "中速", "高速"]).name("转速2");
// 创建按钮
gui.add(guiControls, "fn").name("按钮");
gui.add(guiControls, "gender").name("性别");
/**
* 控制颜色
* 语法2：gui.addColor(object, property)
*/
gui.addColor(guiControls, "color1");
// 通过name可设置别名
gui.addColor(guiControls, "color2").name("颜色别名2");
// 创建一个Folder
const folder = gui.addFolder("其它颜色");
folder.addColor(guiControls, "color3");
folder.addColor(guiControls, "color4");
//可以通过onChange方法来监听改变的值，从而修改样式
gui.addColor(guiControls, "color2").name("颜色别名2").onChange((e)=>{
console.log(e);
});