three.js——GUI的使用

效果图

1、导入gui

// 导入ligui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'

2、创建一个GUI对象

const gui = new GUI()

3、通过gui调用方法 name:按钮的名称

// 创建全屏函数
let eventObj = {Fullscreen: function () {// 全屏document.body.requestFullscreen()},ExitFullscreen: function () {// 退出全屏document.exitFullscreen()}
}
//创建按钮调用的函数
gui.add(eventObj, 'Fullscreen').name('全屏')
gui.add(eventObj, "ExitFullscreen").name('退出全屏')// 控制立方体的位置
let folder = gui.addFolder('立方体位置')
folder.add(cube.position, "x").min(-10).max(10).step(1).name('立方体x轴的位置').onChange((val) => {console.log(val)
})
folder.add(cube.position, 'y').min(-10).max(10).step(1).name('立方体y轴的位置').onFinishChange((val) => {console.log('移动结束')
})
folder.add(cube.position, 'z').min(-10).max(10).step(1).name('立方体z轴的位置')