three.js——GUI的使用

效果图

1、导入gui

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

2、创建一个GUI对象

const gui = new GUI()
1

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轴的位置')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24