dat.GUI

我们将学习 dat.GUI，这个 debugUI 的 api 也非常简单可以直接参考 api文档

我们添加如下代码

/**
 * Debug
 */
const gui = new dat.GUI({
  // closed: true,
  width: 400,
})
// gui.hide() // press H to show

gui.add(cubeMesh.position, 'y').min(-3).max(3).step(0.01)
  .name('cubeMesh Y') // 别名
gui.add(cubeMesh.position, 'x').min(-3).max(3).step(0.01)
gui.add(cubeMesh.position, 'z').min(-3).max(3).step(0.01)

gui.add(cubeMesh, 'visible') // boolean
gui.add(cubeMesh.material, 'wireframe') // boolean

const debugObj = {
  color: defaultColor,
  spin() {
    gsap.to(cubeMesh.rotation, {
      duration: 1,
      y: cubeMesh.rotation.y + Math.PI * 2,
    })
  },
}

gui.addColor(debugObj, 'color').onChange((e) => {
  cubeMesh.material.color.set(e)
})

gui.add(debugObj, 'spin') // function