探秘 Threejs GUI:开启丝滑调试之旅

我们发现,如果每次通过修改代码的方式修改属性值效率太低了,所以我们可以使用 lil.GUI 来创建一个图形用户界面,通过拖动滑块、选择下拉菜单、点击按钮等方式来控制应用程序的参数。

介绍

dat.GUI 是一个轻量级的 JavaScript 库,用于在浏览器中创建图形用户界面(GUI)。它允许开发者通过拖动滑块、选择下拉菜单、点击按钮等方式来控制应用程序的参数。dat.GUI 可以与任何 JavaScript 库或框架一起使用,包括 Three.js。

使用

这个 Threejs 里面自带的有,所以直接导入就好。

js 复制代码
import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";
const gui = new GUI();

API

  • name:GUI 元素的名称。
  • control:要添加的控件。
  • min:控件的最小值。
  • max:控件的最大值。
  • step:控件的变化步长。
  • onChange:控件值改变时的回调函数。
  • onFinishChange:控件值完成改变时的回调函数。
  • listen:是否监听控件值的变化。
  • name:控件的名称。
  • callback:按钮点击时的回调函数。
  • color:颜色选择器的初始颜色。

domElement

获取 GUI 的 DOM 元素。那就意味着,我们可以通过这个元素来操作 GUI 的样式。

js 复制代码
gui.domElement.style.position = "absolute";
gui.domElement.style.top = "0";
gui.domElement.style.left = "0";

add

添加一个新的 GUI 元素。

js 复制代码
gui.add(camera.position, "x").min(-10).max(10).step(0.1).name("相机X轴位置");
gui.add(camera.position, "y").min(-10).max(10).step(0.1).name("相机Y轴位置");
gui.add(camera.position, "z").min(-10).max(10).step(0.1).name("相机Z轴位置");

addFolder

创建一个新的文件夹,用于组织 GUI 元素。

js 复制代码
const folder = gui.addFolder("立方体位置");
folder.add(camera.position, "x").min(-10).max(10).step(0.1).name("相机X轴位置");
folder.add(camera.position, "y").min(-10).max(10).step(0.1).name("相机Y轴位置");
folder.add(camera.position, "z").min(-10).max(10).step(0.1).name("相机Z轴位置");

这样可以更好的管理 GUI 元素。

addColor

添加一个颜色选择器。

js 复制代码
gui.addColor(cube.material, "color");

onChange

当控件值改变时触发的事件。

js 复制代码
//在onChange的回调中
//通过形参获取修改的数值
//使用THREE提供的数学工具,将度转换成弧度
const folder2 = gui.addFolder("立方体旋转(度数)");
const rotation = {
  x: 0,
  y: 0,
  z: 0,
};
folder2
  .add(rotation, "x", -180, 180, 1)
  .name("立方体X轴旋转")
  .onChange((value) => {
    console.log(value);
    cube.rotation.x = THREE.MathUtils.degToRad(value); //将角度转换为弧度
  });
folder2
  .add(rotation, "y", -180, 180, 1)
  .name("立方体Y轴旋转")
  .onChange((value) => {
    console.log(value);
    cube.rotation.y = THREE.MathUtils.degToRad(value); //将角度转换为弧度
  });
folder2
  .add(rotation, "z", -180, 180, 1)
  .name("立方体Z轴旋转")
  .onChange((value) => {
    console.log(value);
    cube.rotation.z = THREE.MathUtils.degToRad(value); //将角度转换为弧度
  });

onFinishChange

当控件值完成改变时触发的事件。

js 复制代码
//会判断属性是否是布尔值,是的话会用选项框展示
gui
  .add(cube.material, "wireframe")
  .name("是否显示线框")
  .onChange(() => {
    console.log("wireframe changed");
  })
  .onFinishChange(() => {
    console.log("wireframe finished changing");
  });

其它UI交互

正常来说:add方法格式:add(控制对象,对象具体属性,其它参数)

其它参数,可以是一个或多个,数据类型也可以不同,gui会根据数据类型自动判断展示方式。

参数3和参数4分别是一个数字,交互界面是一个鼠标可以拖到的滑块

参数3是一个数组/对象,交互界面是一个下拉菜单

参数3是一个布尔值,交互界面是一个单选框

js 复制代码
//参数3是数组
gui.add(camera.position, "x", [-10, 0, 10]);
//参数3是对象
gui.add(camera.position, "y", {
  左侧: -10,
  中间: 0,
  右侧: 10,
})
//参数3是布尔值
let obj = {
  bool:false
}
gui.add(obj,'bool').name('布尔值')

书洞笔记

相关推荐
爱分享的程序员19 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘24 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出26 分钟前
万字长文带你了解微前端架构
前端·微服务·前端框架
你这个年龄怎么睡得着的26 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
Java水解29 分钟前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵32 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im33 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man33 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下1 小时前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构