ThreeJS:lil-GUI调试开发

最新推荐文章于 2025-06-05 15:56:13 发布

是席木木啊

最新推荐文章于 2025-06-05 15:56:13 发布

阅读量447

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ThreeJS 文章标签： ThreeJS webgl web3d

本文链接：https://blog.csdn.net/weixin_43524214/article/details/138402323

ThreeJS 专栏收录该内容

13 篇文章

订阅专栏

文章介绍了GitHub上的lil-gui库，一个用于Web页面的浮动控制面板，可以替代dat.gui在多数项目中使用。ThreeJS内置了lil-gui，通过示例展示了如何利用它实现全屏显示和退出全屏功能，以及如何创建和定制GUI实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lil-gui

GitHub - georgealways/lil-gui: Makes a floating panel for controllers on the web. Works as a drop-in replacement for dat.gui in most projects.

lil-gui可提供一个浮动面板实现web页面的控制操作，在绝大多数项目中，可用于平替dat.gui，官网地址：lil-gui 0.19.2。

ThreeJS:使用lil-gui

threejs内置了lil-gui，导入方法如下，

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js' //lil-gui调试工具

例如：我们将之前的全屏显示、退出全屏功能，通过lil-gui实现。

//TODO:创建GUI实例
const gui = new GUI();

//TODO:添加全屏显示、退出全屏按钮,以及回调事件
//TODO:lil-gui添加调试按钮
const myObject = {
  // myBoolean: true,
  fullScreenBtnFunction: function () {
    document.body.requestFullscreen();
  },
  exitFullScreenBtnFunction: function () {
    document.exitFullscreen();
  },
  // myString: 'lil-gui',
  // myNumber: 1
};

gui.add(myObject, "fullScreenBtnFunction").name("全屏显示"); // Checkbox
gui.add(myObject, "exitFullScreenBtnFunction").name("退出全屏"); // Button

显示效果如下，