dat.gui

gui库

安装

npm i -D dat.gui

使用

import * as dat from 'dat.gui'

const gui = new dat.GUI();
gui
  .add(cube.positionm,"x")
  .min(0)
  .max(5)
  .step(0.1)
  .name("Cube X translate")
  .onChange((value)=>{

  })
  .onFinishChange((value)=>{

  });

// 修改颜色
const params = { 
  color: "#ffff00",
  fn: () => {
    gsap.to(cube.position, {x:5, duration: 2, yoyo: true, repeat: -1});
  }
  
};
gui.addColor(params, "color").onChange(value=>{
  cube.material.color.set(value);
});

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

// 点击触发事件
gui.add(params, "fn").name("立方体运动");

// 设置分层级
let secLevel = gui.addFolder("第二层级");
secLevel.add(cube.material, "wireframe").name("是否显示");