Three.js+Vue3+Vite应用lil-GUI调试开发3D效果（三）
前期文章中我们完成了创建第一个场景、添加轨道控制器的功能，接下来我们继续阐述其他的功能，本篇文章中主要讲述如何应用lil-GUI调试开发3D效果，在开始具体流程和步骤之前，请先查看之前的内容，因为该功能必须在前期内容的基础上才可完成。
目录
一、GUI界面概述
二、GUI使用
1.导入GUI
2.创建一个对象
3.创建GUI
4.应用GUI
5.控制立方体位置
（1）直接显示法
（2）最大值、最小值法
（3）添加folder法
（4）添加change事件
一、GUI界面概述
GUI，全称Graphical User Interface，即图形化用户界面，它是众多程序，特别是上位机软件中不可或缺的一部分。通过GUI，用户只需进行简单的点击和操作，就能轻松调用底层的复杂代码，极大地提升了使用的便捷性和结果的直观展示性。
当我们完成了底层代码的开发后，接下来就可以着手构建一个GUI界面了。这个界面就像是一个精美的包装，它能够将我们的程序功能以更加友好、直观的方式呈现给用户。用户通过GUI，可以轻松地与程序进行交互，无需深入了解底层的复杂逻辑。
二、GUI使用
本章中只阐述GUI的相关内容，之前的代码就不在进行书写，接下来我们在代码中使用GUI
1.导入GUI
//导入lil.gui
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min'2.创建一个对象
这里我们应用显示全屏和退出全屏的案例来展示如何使用改功能
//创建显示全屏和退出全屏对象
const eventObj = ref({//显示全屏showFullScreen: function () {document.body.requestFullscreen()},//退出全屏exitFullScreen: function () {document.exitFullscreen()}
})3.创建GUI
//创建guiconst gui = new GUI()4.应用GUI
这里使用刚刚创建的显示全屏，退出全屏为例
//添加控制器--显示全屏gui.add(eventObj.value, 'showFullScreen').name('全屏')//添加控制器--退出全屏gui.add(eventObj.value, 'exitFullScreen').name('退出全屏')以下是实现效果，我们可以看见右上角有个controls控制按钮
5.控制立方体位置
在上面代码的基础上我们继续添加，这里拿控制立方体为例，我们具体的写法分了几种，下面一一介绍
（1）直接显示法
//控制立方体的位置---（-20,20）是范围--第一种写法// gui.add(cube.position, 'x', -20, 20).name('立方体x轴')（2）最大值、最小值法
//第二种写法---移动范围最小值是-20，最大值是20，步长为1// gui.add(cube.position, 'x').min(-20).max(20).step(1).name('立方体x轴')（3）添加folder法
添加folder写法可以将其作为一个文件夹，能添加多个控制器
//添加folder写法const foldder = gui.addFolder('立方体')foldder.add(cube.position, 'x').min(-20).max(20).step(1).name('x轴')//y轴位置foldder.add(cube.position, 'y').min(-20).max(20).step(1).name('y轴')//z轴位置foldder.add(cube.position, 'z').min(-20).max(20).step(1).name('z轴')（4）添加change事件
这里还可以继续在后面添加change事件，以便于实时更新立方体位置
//x轴位置---onChange事件是立即更新的，onFinishChange事件是鼠标松开更新的foldder.add(cube.position, 'x').min(-20).max(20).step(1).name('x轴').onChange(val => {console.log('立方体x轴位置改变', val)})//y轴位置foldder.add(cube.position, 'y').min(-20).max(20).step(1).name('y轴').onFinishChange(val => {console.log('立方体y轴位置改变', val)})//z轴位置foldder.add(cube.position, 'z').min(-20).max(20).step(1).name('z轴')
（5）调节立方体颜色
根据上述的方法，我们这里在做个能通过GUI面板快速调节立方体颜色的小功能，首先我们先设置父元素材质为线框模式
//设置父元素材质为线框模式parentMaterial.wireframe = true然后利用gui改变改变父元素材质
//改变父元素材质--判断是布尔值gui.add(parentMaterial, 'wireframe').name('父元素材质')如果也想要改变子元素的材质，先定义一个颜色对象
//改变子元素材质let colorParams = {cubeColor: '#0x00ff00'}然后也是同样的利用GUI
//给立方体添加颜色gui.addColor(colorParams, 'cubeColor').name('立方体颜色').onChange(val => {console.log(val, 'vvvv')//点击颜色修改cube的颜色cube.material.color.set(val)})