探秘 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('布尔值')

书洞笔记

相关推荐
南玖i13 分钟前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel17 分钟前
Web发展与Vue.js导读
前端
YAY_tyy19 分钟前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_3 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801463 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店5 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown5 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip6 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿7 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.8 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js