前言

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);
    });

总结

官方文档