Three.js+Vue3+Vite应用lil-GUI调试开发3D效果（三）

前期文章中我们完成了创建第一个场景、添加轨道控制器的功能，接下来我们继续阐述其他的功能，本篇文章中主要讲述如何应用lil-GUI调试开发3D效果，在开始具体流程和步骤之前，请先查看之前的内容，因为该功能必须在前期内容的基础上才可完成。

一、GUI界面概述

二、GUI使用

1.导入GUI

一、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

复制代码

//创建gui
  const 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)
    })