GUI

API

GUI

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

const events = {
  // 注册事件
  Full() {
    console.log("2");
  },
};

const gui = new GUI();

分组

const folder = gui.addFolder("立方体位置");

folder
  .add(mesh.position, "x")
  .max(10)
  .min(1)
  .step(1)
  .name("mesh position x")
  .onFinishChange(() => {});

按钮

// 按钮
gui.add(events, "Full").onChange(() => {});

滑块

gui
  .add(mesh.position, "x")
  .max(10)
  .min(1)
  .step(1)
  .name("mesh position x")
  .onFinishChange(() => {});

开关

gui.add(mesh.material, "wireframe").name("是否仅绘制线框");

下拉选择

gui.add(mesh.position, "x", [1, 2, 3]);

颜色选择

gui
  .addColor(
    {
      meshColor: "#fff",
    },
    "meshColor"
  )
  .onChange((v) => {
    material.color = new THREE.Color(v);
  });