本地调试工具 lil-gui

使用

import GUI from "lil-gui";

const gui = new GUI();

const eventObj = {
  fullScreen: () => {
    document.body.requestFullscreen();
  },
  size: 0,
};

gui.add(eventObj, "fullScreen").name("全屏");

gui.add(cube.position, "x").min(-10).max(10).step(0.1).name("立方体位置 x");

gui
  .add(eventObj, "size")
  .min(0)
  .max(100)
  .step(1)
  .name("立方体大小")
  .onChange((value) => {
    cube.scale.set(value, value, value);
  });

add 方法

add 方法用于添加一个控件到 GUI 中。

gui.add(object, property).name(label);

• object：要添加控件的对象。
• property：要添加控件的属性名。一般来说是个方法
• label：控件的显示名称。

常用控件

• gui.add(object, property).name(label)：添加一个数值控件。
• gui.add(object, property).name(label).min(min).max(max).step(step)：添加一个数值控件，设置最小值、最大值和步长。
• gui.add(object, property).name(label).onChange(callback)：添加一个数值控件，当值改变时调用回调函数。

addColor 方法

addColor 方法用于添加一个颜色控件到 GUI 中。

gui.addColor(object, property).name(label);

• object：要添加控件的对象。
• property：要添加控件的属性名。一般来说是个方法
• label：控件的显示名称。

addFolder 方法

addFolder 方法用于添加一个文件夹到 GUI 中。 对控制面板做分组控制。

const folder = gui.addFolder(label);
folder.add(object, property).name(label);

• label：文件夹的显示名称。