lil-gui调试开发3D效果

lil-gui

lii-gui 为web上的控制器创建一个浮动面板，它可以作为数据的临时替代品。方便用户通过界面组件来控制场景中的物体，大大提高开发调试效率。

使用效果会在当前页面的右上角固定一个浮动面板，截图如下：

使用

在上文《初识threejs - 你的第一个3D应用》的基础上，我们可以添加 lil-gui，来快速修改指定参数。

引入

three 内置了该插件，不需要额外安装。

js 复制代码

import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

新建

js 复制代码

const gui = new GUI();

创建按钮

js 复制代码

gui.add(eventObj, "Fullscreen").name("全屏");
gui.add(eventObj, "ExitFullscreen").name("退出全屏");

修改数值

js 复制代码

let folder = gui.addFolder("立方体位置");
folder
  .add(cube.position, "x")
  .min(-10)
  .max(10)
  .step(1)
  .name("立方体x轴位置")
  .onChange((val) => {
    console.log(val);
  });
folder
  .add(cube.position, "y")
  .min(-10)
  .max(10)
  .step(1)
  .name("立方体y轴位置")
  .onFinishChange((val) => {
    console.log(val);
  });
folder.add(cube.position, "z").min(-10).max(10).step(1).name("立方体z轴位置");

复选框

上面的动画效果可以发现，移动子元素的 y 轴方向运动，子元素立方体并没有沿着 y 轴方向运行，还是按照倾斜了45° 的父元素的 y 轴方向运动。

这里为了调试方便，将父元素的材质更改为线框模式。

js 复制代码

parent_material.wireframe = true;

那对于布尔值，lit-gui 会自动识别采用复选框。

js 复制代码

gui.add(parent_material, "wireframe").name("父元素线框模式");

颜色选择器

js 复制代码

let colorParams = {
  cubeColor: 80000000,
};
gui
  .addColor(colorParams, "cubeColor")
  .name("立方体颜色")
  .onChange((val) => {
    cube.material.color.set(val);
  });

完整代码如下：

js 复制代码

const gui = new GUI();
gui.add(eventObj, "Fullscreen").name("全屏");
gui.add(eventObj, "ExitFullscreen").name("退出全屏");
let folder = gui.addFolder("立方体位置");
folder
  .add(cube.position, "x")
  .min(-10)
  .max(10)
  .step(1)
  .name("立方体x轴位置")
  .onChange((val) => {
    console.log(val);
  });
folder
  .add(cube.position, "y")
  .min(-10)
  .max(10)
  .step(1)
  .name("立方体y轴位置")
  .onFinishChange((val) => {
    console.log(val);
  });
folder.add(cube.position, "z").min(-10).max(10).step(1).name("立方体z轴位置");

gui.add(parent_material, "wireframe").name("父元素线框模式");

let colorParams = {
  cubeColor: "#c4b400",
};
gui
  .addColor(colorParams, "cubeColor")
  .name("立方体颜色")
  .onChange((val) => {
    cube.material.color.set(val);
  });

最后

更多细节可以参考官方文档：lil-gui.georgealways.com/

注：本文首发微信公众号【前端一起学】，里面有持续更新的Vue源码实战专栏，Electron实战，Three.js入门教程等，还有更多前端基础知识超详细总结，欢迎关注。