gui的引入gui不止是可以引入到three中，是可以引入任何页面中，他可以直接控制页面中一个元素的属性，也可以控制属性

gui不止是可以引入到three中，是可以引入任何页面中，他可以直接控制页面中一个元素的属性，也可以控制属性然后将属性赋值分页面中的元素。 1、安装gui

npm i dat.gui

2、引入gui

import * as dat from  "dat.gui"

3、使用gui

const gui = new dat.GUI()
注意gui是符合链式调用的函数。

4、直接控制物体--可以链式调用函数，写明此属性名字、最大值和最小值，还可以添加回调函数，将每次的调整的value打印出来，这就给下面直接控制属性埋下了伏笔。

图片.png

gui.add(cube.position,'x').min(0).max(5).step(0.01).name("移动X轴").onChange((value)=>{

    console.log(value);

})

5、先控制颜色属性，然后通过回调函数，将改变后的颜色属性再赋值给物体的属性。

先定义一个对象，里面可以有属性和函数，但是注意gui.addColor，用的不是gui.add。
let parm = {

    color:"#000000"

}

gui.addColor(parm,"color").name("颜色").onChange((value)=>{

    cube.material.color.set(value)

})

6、可以控制函数的运行---点击后将执行函数fn（）

let parm = {

    color:"#000000",

    fn:()=>{gsap.to(cube.position,{x:5,duration:2,ease:"power2.in"})
    }

}
gui.add(parm,"fn").name("点击运动")

7、可以将属性设置到抽屉里

let floder = gui.addFolder("设置立方体")//#11#用floder添加可以设置抽屉，将菜单藏起来

floder.add(cube.material,"wireframe").name("设置材质为线框模式")

图片.png