【threejs】GUI库

dat.gui

dat.gui 是一个轻量级的图形用户界面，用于在 JavaScript 中更改变量，使用这个库可以很方便的修改三维物体的属性。

文档：https://github.com/dataarts/dat.gui/blob/HEAD/API.md

基本使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<template>
  <div>{{ obj.size }}</div>
  <div>{{ obj.hide }}</div>
  <div>{{ obj.color }}</div>
  <div>count: {{ count }}</div>
</template>

<script setup>
  import { reactive, ref } from "vue";
  import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

  const count = ref(0);
  const gui = new GUI();

  const obj = reactive({
    size: 0,
    hide: false,
    color: "#ff0000",
    fn1: function () {
      count.value++;
    },
  });

  const folder = gui.addFolder("分组1");
  folder.add(obj, "size", 0, 100, 1).name("大小");
  folder.add(obj, "hide").name("隐藏");
  folder.addColor(obj, "color").name("颜色");
  folder.add(obj, "fn1").name("count++");
</script>

基本使用

结合 threejs 使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<template>
  <div ref="threeContainer" class="three-container"></div>
</template>
<script setup>
  import { onMounted, ref } from "vue";
  import * as THREE from "three";
  import { GUI } from "three/examples/jsm/libs/lil-gui.module.min.js";

  const gui = new GUI();
  const threeContainer = ref(null);

  function init3D() {
    // 场景
    const scene = new THREE.Scene();
    // 相机
    const camera = new THREE.PerspectiveCamera(75, threeContainer.value.clientWidth / threeContainer.value.clientHeight, 0.1, 1000);
    camera.position.set(0, 0, 3);

    // 渲染器
    const renderer = new THREE.WebGLRenderer({
      antialias: true,
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(threeContainer.value.clientWidth, threeContainer.value.clientHeight);
    threeContainer.value.appendChild(renderer.domElement);

    // 添加立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial();
    material.color = new THREE.Color(0x00ff00);
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 使用 gui 调节参数
    gui.add(cube.position, "x", -5, 5, 0.01).name("x轴");
    gui.add(cube.position, "y", -5, 5, 0.01).name("y轴");
    gui.add(cube.position, "z", -5, 5, 0.01).name("z轴");
    gui.addColor(material, "color").name("颜色");

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }
    animate();
  }

  onMounted(() => {
    init3D();
  });
</script>
<style scoped>
  .three-container {
    width: 100vw;
    height: 100vh;
  }
</style>

结合 threejs 使用

常用组件及方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// prop字符串类型 - 输入框
gui.add(obj, "prop");
// prop数字类型 - 数字输入与滑块
gui.add(obj, "prop", 0, 100, 1);
// prop布尔值 - 选择框
gui.add(obj, "prop");
// prop函数 - 按钮
gui.add(obj, "prop");
// 3参数数组/对象 - 下拉框
gui.add(obj, "prop", ["value1", "value2", "value3"]);
gui.add(obj, "prop", { label1: "value1", label2: "value2", label3: "value3" });
// addColor - 颜色选择器
gui.addColor(obj, "prop");

// onChange - 值改变时的回调函数
gui.add(obj, "prop").onChange((value) => {
  console.log(value);
});

// addFolder - 分组
const f1 = gui.addFolder("分组1");
f1.add(obj, "prop");
// 展开
f1.open();
// 关闭
f1.close();

// addFolder - 分组套娃
const f2 = gui.addFolder("分组2");
const f21 = f2.addFolder("分组2-1");
f21.add(obj, "prop");