lil-gui使用

Lil-GUI 是一个用于创建简单 GUI 界面的 JavaScript 库。它可以帮助开发人员快速构建用户界面，并提供了一些常用的 UI 元素，如按钮、文本框、下拉框等。

使用 Lil-GUI 很简单，只需要引入库文件并创建一个 GUI 对象，然后添加 UI 元素即可。例如：

<!-- 引入 Lil-GUI 库 -->
<script src="lil-gui.js"></script>

<!-- 在 HTML 中创建一个容器元素 -->
<div id="container"></div>

<!-- 在 JavaScript 中创建一个 GUI 对象 -->
<script>
  // 创建一个 GUI 对象
  const gui = new lilGUI.GUI();

  // 在 GUI 中添加一个按钮
  const button = gui.addButton('Click me!', () => {
    alert('Button clicked!');
  });

  // 将 GUI 添加到页面中
  const container = document.getElementById('container');
  container.appendChild(gui.domElement);
</script>

这段代码将创建一个 GUI 对象并添加一个按钮。当按钮被点击时，它将弹出一个警告框。最后，将 GUI 添加到页面中。

除了按钮，Lil-GUI 还提供了一些其他的 UI 元素，如文本框、下拉框、滑块等。您可以使用这些元素创建自定义的 GUI 界面，并将其集成到您的应用程序中。

需要注意的是，Lil-GUI 是一个简单的 GUI 库，适用于创建小型的、快速原型的界面。如果您需要创建更复杂的 GUI 界面，可以考虑使用其他 GUI 库，如 jQuery UI、Bootstrap 等。