npm install --save dat.gui
import * as dat from
const gui = new dat.GUI();
//生成面板 并且添加各种各样的演示
new GUI([params]).domElement : DOMElement //gui实例的dom节点
.parent : dat.gui.GUI // 我们创建new dat.GUI({parent:other GUI}),如果有嵌套在别的GUI里，这里可以获取父gui的实例
.autoPlace : Boolean
.closeOnTop : Boolean //关闭面板按钮的位置是否在上面
.preset : String
.width : Number //GUI面板宽度
.name : String //GUI的名字
.closed : Boolean //GUI是否关闭
.load : Object
.useLocalStorage : Boolean
.add(object, property, [min], [max], [step]) ⇒ Controller //在GUI面板上添加操作的
@object 要操作的对象
@property 需要操作的对象中的属性
@min 最小值
@max 最大值
@step 每次拖动滚动条的步幅，就是一次拖动增加多少，默认是1
@Controller 操作数据之后能够调用的api
.addColor(object, property) ⇒ Controller //在GUI面板上增加拾色器
.remove(controller) //删除控制器 就是我们上面增加的
.destroy()
.addFolder(name) ⇒ dat.gui.GUI //增加GUI上文件夹的面板，
.removeFolder(folder) //删除文件夹
.open()
.close()
.hide()
.show()
.getRoot() ⇒ dat.gui.GUI
.getSaveObject() ⇒ Object
//添加x轴的移动const gui = new dat.GUI();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 params ={ color:"#ffff00", fn:()=>{ gsap.to(cube.position,{ x:5, duration:2, yoyo:true, repeat:-1 }) }}//gui 修改颜色gui.addColor(params,"color").onChange((value) => { console.log("值被修改", value); cube.material.color.set(value);});gui.add(cube,"visible").name("是否显示");var folder = gui.addFolder("设置立方体");folder.add(cube.material,"wireframe");folder.add(params,"fn").name("立方体运动");
