// 导入gui
import * as dat from 'dat.gui'
const gui = new dat.GUI()
// 切换全屏操作对象
const toggleFullScreenObj = {
full: function () {
document.body.requestFullscreen()
},
exitFull: function () {
document.exitFullscreen()
}
}
// 添加操作按钮
// .name() 重命名
// 自动识别toggleFullScreenObj对象上的属性，属性值为function
gui.add(toggleFullScreenObj,'full').name('全屏')
gui.add(toggleFullScreenObj,'exitFull').name('退出全屏')
// 控制立方体位置
// min,max 最小最大位移限制
// step 每次位移距离
// 也可以写成：gui.add(cube.position, 'x', -10, 10, 0.01).name('移动位置 x轴')
gui.add(cube.position, "x").min(0).max(5).step(0.01).name("移动位置 x轴").onChange(val => {
console.log('x轴 位置', val)
}).onFinishChange(val => {
console.log('x轴停止变化 位置', val)
})
// 设置操作组 以下拉框形式展示操作组
let folder = gui.addFolder('设置立方体位置')
folder.add(cube.position, 'x').min(-10).max(10).name('x轴')
folder.add(cube.position, 'y').min(-10).max(10).name('y轴')
folder.add(cube.position, 'z').min(-10).max(10).name('z轴')
// 切换材质
gui.add(cubeMaterial,'wireframe').name('切换立方体材质')
// 设置立方体颜色 addColor
const params = {
color: "#ffff00",
}
gui.addColor(params, "color").onChange(val => {
console.log('color', val)
cube.material.color.set(val) // 这里要注意颜色的设置方式是set()
})
// 位移动画
const params = {
fn: () => {
gsap.to(cube.position, { x: 5, duration: 5, yoyo: true, repeat: -1 })
}
}
gui.add(params, 'fn').name('点击循环位移')
// 切换立方体隐藏、显示
gui.add(cube, 'visible').name('是否显示');
