1 引入

引入 Three.js 中的 GUI。

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

2 创建

创建 GUI 对象，GUI 界面会自动载入 THREE 画布中。

// GUI
const gui = new GUI()

3 属性控制界面

使用 .add 挂载控制属性。

// light
const light = new THREE.HemisphereLight(0x4488bb, 0x002244, 0.5) // 创建半球光
light.position.set(2, 1, 1) // 设置光源位置
scene.add(light) // 添加光'

// 通过 add 方法添加 light 的控制条
gui.add(light, 'intensity', 0, 2.0).name('半球光强度').step(0.1)
// .add(控制对象， 控制属性， 最小值， 最大值) 一个简单的控制条
// .name(控制属性的 title)
// .step(步进值）

效果：

4 VUE3 中自定义属性控制

import { ref } from 'vue';

let timeSpeed = ref(1) // 在 vue3 中定义数据

// 通过 add 方法添加自定义属性的控制条
gui.add(timeSpeed, 'value', 0, 2).name('时间流速').step(0.1)
// 直接把数据名作为控制对象写入
// value 作为控制属性写入  类似于使用 vue3 数据时要写 timeSpeed.value

效果：

总结

在 THREE.js 的 GUI 控件中直接操作 Vue3 的数据，直接把用 ref() 定义的数据直接当对象使用，其 value 当属性使用。

笔记主要为自用，欢迎友好交流！