// 導(dǎo)入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)
})
// 設(shè)置操作組 以下拉框形式展示操作組
let folder = gui.addFolder('設(shè)置立方體位置')
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軸')
// 切換材質(zhì)
gui.add(cubeMaterial,'wireframe').name('切換立方體材質(zhì)')
// 設(shè)置立方體顏色 addColor
const params = {
color: "#ffff00",
}
gui.addColor(params, "color").onChange(val => {
console.log('color', val)
cube.material.color.set(val) // 這里要注意顏色的設(shè)置方式是set()
})
// 位移動畫
const params = {
fn: () => {
gsap.to(cube.position, { x: 5, duration: 5, yoyo: true, repeat: -1 })
}
}
gui.add(params, 'fn').name('點擊循環(huán)位移')
// 切換立方體隱藏酣倾、顯示
gui.add(cube, 'visible').name('是否顯示');
