dat.gui 使用图形界面修改变量

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的32天，点击查看活动详情

dat.gui的安装

$ npm install --save dat.gui

初始化方式

// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

const gui = new dat.GUI();

这个库挺牛啊，低耦合，创建const gui = new dat.GUI();这句话加上后，浏览器右上角就有这个控制器的显示和隐藏的按钮了，只是暂时还没有功能

尝试将cube的positon的x这个变量交给gui控制，最大值是5，最小值是0

gui.add(cube.position,'x').max(5).min(0);

看效果，改变x的 大小，可以看到物体的x轴偏移位置会对应变化，神奇。

gui的链式写法还可以设置别名，监听改变事件，监听改变结束时间，结合这个特性，可以尝试设置物体的颜色，首先定义一个变量，然后给它一个color属性，我们把color这个属性交给gui控制器控制，然后监听change事件，当颜色发生改变，我们尝试将物体的颜色改变成用户选中的颜色，由于render函数在一直执行，会立刻将物体样式渲染到浏览器中

// 创建 dat GUI 
const gui = new dat.GUI();

gui.add(cube.position,'x').max(5).min(0).step(0.01).name('移动x轴').onChange(value=>{
    console.log('改成了',value)
}).onFinishChange((value)=>{
    console.log('完全停下来')
})
const params={
    color:'#ffff00'
}
gui.addColor(params,'color').name('颜色').onChange(color=>{
    console.log("改成了颜色为",color)
    cube.material.color.set(color)
}).onFinishChange(color=>{
    console.log('颜色最终为',color)
})

还可以控制boolean值，会渲染成chckbox,也可以绑定某个事件，点击时触发这个事件,再次点击就是暂停，再次点击就是继续。

let animate2;
const params={
    color:'#ffff00',
    fn(){
        if(animate2){
              if (animate2.isActive()) {
                  animate2.pause();
              } else {
                  animate2.resume();
              }
        }else{
        animate2=gsap.to(cube.position,{x:5,duration:2,yoyo:true,repeat:-1})

        }
    }
}

// 设置checkbox
gui.add(cube,'visible').name('是否显示')

// 设置按钮触发某个事件
gui.add(params,'fn').name('立方体运动')