npm install --save dat.gui
方便调试参数
import * as dat from "dat.gui"
import gsap from 'gsap' // 动画库
const gui = new dat.GUI()
// 隐藏gui
gui.hide()
/*
add(
要控制的mesh或者是相机|或者是模型,
要控制的具体值|y轴，
最小范围,
最大范围,
精度
)
*/
gui.add(mesh.position, 'y', -3, 3, 0.01);
gui.add(mesh.position, 'x', -3, 3, 0.01);
gui.add(mesh.position, 'z', -3, 3, 0.01);
|| 或者可以链式调用
gui.add(mesh.position, 'y').min(-3).max(3).step(0.01).name('更改position')
// 控制是否显示
gui.add(mesh, 'visible')
// 控制材料(线框)
gui.add(material, 'wireframe')
// 改变颜色面板-需要在回调onChange中设置材质的颜色
const parameters = {
color: 0xff0000,
/* 执行动画 */
spin: () => {
gsap.to(mesh.rotation, {druation: 1, y: mesh.rotation.y + 10})
}
}
/* 改变颜色 */
gui.addColor(parameters, 'color').onChange(() => {
material.color.set(parameters.color)
})
/* 点击执行动画 */
gui.add(parameters, 'spin')
