dat.gui Quick adjustment variable tool

Install import

Install

npm install --save  dat.gui

import

import * as gui from "dat.gui";

initialization

const gui=new dat.GUI();

add configuration

Basic parameters
gui.add(cube.position,"x") : gui.add(adjusted attribute, "a certain value of the attribute")
.min(0): the minimum value of adjustment (the data type corresponding to the attribute)
.max (5): maximum value (data type corresponding to the attribute)
.step(0.1): the value of each adjustment, the default is 1
.name("x-axis"): this corresponds to the name in the page adjustment panel, the default is The name of this attribute value
. onChange((value)=>{console.log("Modified value:",value);}) The event that is triggered when the value is modified can return value.
onFinishChange((value)=>{ console.log("Triggered after a complete stop", value);}) Triggered after a complete stop, which is equivalent to throttling

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

Modify the color of an object

const colorFFFF00={
    color:"#ffff00"
}

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

 Controlling the display and hiding of objects

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

 Set button click to trigger an event

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("是否运动")

 

set folder

Create a folder folder. If you want to add some adjustment variables under this file, you will not gui.add()write it like before. Usefolder.add()

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