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)})