dat.gui 快速调节变量工具

安装导入

安装

npm install --save  dat.gui

导入

import * as gui from "dat.gui";

初始化

const gui=new dat.GUI();

添加配置

基本参数
gui.add(cube.position,"x")：gui.add(调节的属性,“属性的某个值”)
.min(0)：调节的最小值(属性对应的数据类型)
.max(5)：最大值(属性对应的数据类型)
.step(0.1)：每次调节的值，默认是1
.name("x轴")：在页面调节面板中这个就对应这个名字，默认是这个属性值的名字
.onChange((value)=>{console.log("修改的值：",value);})值被修改时触发的事件，可以返回value
.onFinishChange((value)=>{console.log("完全停下来之后触发",value);})完全停下来之后触发，相当于节流

gui.add(cube.position,"x").min(0).max(5).step(0.1).name("x轴").onChange((value)=>{
    console.log("修改的值：",value);
}).onFinishChange((value)=>{
    console.log("完全停下来之后触发",value);
})

修改物体的颜色

const colorFFFF00={
    color:"#ffff00"
}

// 属性的名称是字符串所以要加上  ""
gui.addColor(colorFFFF00,"color").onChange((value)=>{
    //修改颜色
    cube.material.color.set(value)
})

 控制物体的显示与隐藏

gui.add(cube,"visible").name("是否显示")

 设置按钮点击触发某个事件

const ff={
    fn:()=>{
        // 让物体运动起来
        gsap.to(cube.rotation,{
            y:Math.PI*2,
            x:Math.PI*2,
            z:Math.PI*2,
            duration:4,
            repeat:-1,
            yoyo:true,
        })
    }
}

gui.add(ff,"fn").name("是否运动")

设置文件夹

创建一个文件夹folder，如果要在这个文件下添加一些调节变量，就不跟之前gui.add()这样写了，使用folder.add()

// 设置文件夹
var folder = gui.addFolder("文件名");
// 在文件夹中添加配置
folder.add(cube.material,"wireframe").name("是否线框显示")