Three.js学习7：dat.GUI 参数控制

 -----------------------------华丽的分割线---------------------

相关代码均已上传到 gitee 中：myThree: 学习 Three.js ，努力加油~！

Gitee 静态演示地址：Three JS 演示页面

 -----------------------------华丽的分割线---------------------

每个学 Three.js 的都被安利了 dat.GUI 吧？

我也不例外！

今天就来了学习下 dat.GUI，并记录下来自己的学习成果。

一、什么是 dat.GUI?

dat.GUI 是一个轻量级的图形用户界面库（GUI 组件），使用这个库可以很容易地创建出能够改变代码变量的界面组件。

官网：https://github.com/dataarts/dat.gui

国内地址：GitCode - 开发者的代码家园

Three.js 每个官方的案例都有这个面板，用于参数调试。

二、引入方式

从官网下载 dat.gui-master.zip，解压后，在 build 目录看到相关文件，用的就是它们。

1. script 标签方式

<script src="js/gui/dat.gui.min.js"></script>
<script>
  const gui = new dat.GUI();
</script>

2. npm 安装

$ npm install --save dat.gui

// CommonJS:
const dat = require('dat.gui');

// ES6:
import * as dat from 'dat.gui';

三、创建 GUI 对象

const gui = new dat.GUI();

此时，我们在页面就有了一个 GUI 面板，不过此刻面板里什么都没有。

四、参数控制

主要用到的方法是：

• gui.add()

• gui.addColor()

它们都会返回一个参数控制对象。

1. 数值参数控制

gui.add(object, attr, min, max, step);

添加某个参数的控制块。其参数含义：

• object：必须。要控制的对象。

• attr：必须。控制对象的某个参数。