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

复制代码
//创建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)
    })
相关推荐
「、皓子~5 分钟前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了8 分钟前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_10 分钟前
Ajax 入门
前端·javascript·ajax
wt_cs17 分钟前
银行回单ocr api集成解析-图像文字识别-文字识别技术
开发语言·python
京东零售技术25 分钟前
京东小程序JS API仓颉改造实践
前端
奋飛34 分钟前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts
老A技术联盟34 分钟前
从小白入门,基于Cursor开发一个前端小程序之Cursor 编程实践与案例分析
前端·小程序
风铃喵游38 分钟前
构建引擎: 打造小程序编译器
前端·小程序·架构
_WndProc39 分钟前
【Python】Flask网页
开发语言·python·flask
sunbyte43 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss