前言

之前在基础篇已经介绍了Three.js一些核心基础概念。回顾一下就是在提前创建好的场景中，添加虚拟相机和几何体，再通过调节光照生成不同的效果投影。对于简单的3D实现，我们可以大致知道每个点的分布以及配置后的效果。但是如果是更复杂的内容，就需要一直在不断的调整中寻找一个更好的效果实现。

这就需要通过一个工具，让当前制作的3D可以动态的实时调整参数，实时的看到对应产生的变化。

Three.js调试工具

dat.gui.js是一个用于创建交互式图形用户界面（GUI）的JavaScript库。它提供了一个简单而强大的界面，使开发人员能够在网页上创建各种控件和参数调整器，以便用户可以直接与应用程序进行交互。

Three.js包里面就有gui部分，这次基于之前的demo来demo创建GUI。

实例化一个GUI对象

import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
const gui = new GUI();

创建控件

dat.gui.js允许创建各种控件，例如滑块、按钮、复选框、颜色选择器和文本输入框等。通过这些控件，可以调整应用程序中的各种参数和选项。

gui.add(arg1, arg2, arg3, arg4)

这个方法会根据参数类型的不同创建不同类型的空间。其中：

1. arg1:控制对象，这个对象里面会包含多个属性。
2. arg2:对象具体属性名称，不同属性的数据类型不同，会根据属性的类型创建不同的控件。

• 如果数字类型，就是拖动Bar，这里需要用到arg3和arg4设置拖动值的范围

    const obj = {
        x: 30,
    };
    gui.add(obj, 'x', 0, 180).onChange(function (value) {
        mesh.position.x = value;
    });
  

  这里随着拖动更新x，对应会看到立方体会在x轴上移动。效果图如下：

• 如果是bool类型，就是一个复选框。选中就是true，取消选中就是false。

  const obj = {
    animation: false,
  };
  gui.add(obj, 'animation').name('旋转动画');
  function render() {
        ...
        renderer.render(scene, camera); //执行渲染操作
        // 当gui界面设置obj.animation为true,mesh执行旋转动画
        if (obj.animation) mesh.rotateY(0.01);
        requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
    }
  

  这里的参数应该直接在render中做是否旋转动画的控制条件。效果如下：

1. arg3：这个参数也会根据类型的不同生成不同的控件。

• 如果是数组或者对象，会自动生成一个下拉菜单。比如：

    gui.add(obj, 'scale', [-100, 0, 100]).name('y坐标').onChange(function (value) {
        mesh.position.y = value;
    });
  
    gui.add(obj, 'scale', {
        left: -100,
        center: 0,
        right: 100
    }).name('位置选择').onChange(function (value) {
        mesh.position.x = value;
    });
  

  并且，这里是要通过监听，拿到当前选择的参数值，然后赋值给场景中的配置属性。数组类型和对象类型的区别就是，对象类型相当于多了一个label显示，下拉菜单每项展示的是key，而不是具体value，数组类型就是一次展示每项的具体值。

颜色选择弃：gui.addColor

创建一个颜色选择器，可以通过这个动态改变颜色。

 const obj = {
   color: 0x00ffff,
 };
 gui.addColor(obj, 'color').onChange(function(value){
     mesh.material.color.set(value);
 });

参数监听

使用dat.gui.js监听控件的变化，可以在修改参数时执行相应的操作。这样程序可以实时响应用户的输入。

上面讲关于下拉菜单时已经展示了它的参数监听功能，可以根据参数的变化进行对应的操作。

参数分组

将相关的控件组织在一起，创建参数的分组。更好地组织和管理控件，让界面更加清晰和易于使用。

相当于根据不同类型创建多个一级菜单，然后再从一级菜单下细分成多个二级菜单。使用gui.addFolder()。

const AFolder = gui.addFolder('A');
AFolder.add(...)

const BFolder = gui.addFolder('B');
BFolder.add(...)

总结

这个工具库整体使用很简单，只需要参考文档API就可以很好的创建并定义属于自己的交互式图形用户界面。介绍它主要是想让自己要有一个更强的意识，我们需要通过学习使用一项工具，来提升我们原本需要做的事情。在当前的时代，除了要好好学习、好好写代码，很重要的一点，就是学会使用工具，研究如何让工具更好的为自己服务，让自己的工作生活有一个进一步的提高。最后可以通过使用工具来不断提升自己，让自己创造更多的价值。