ThreeJS:lil-GUI调试开发

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

        显示效果如下，

lil-gui详细文档

        可参考：lil-gui 0.19.2。