安装导入
安装
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("是否线框显示")