Three.js - dat.GUI库的使用详解：下（进阶用法）

2017-10-04 发布：hangge 阅读：8365

四、设置控制项标签文字

默认情况下每个控制项左侧的标签显示的是对应的属性名，我们可以通过 name 方法设置成其他的文字（中文也是支持的）

var controls = new function () {
    this.speed = 1;
};

var gui = new dat.GUI();
gui.add(controls, 'speed', 0, 10).name("旋转速度");

五、控制项分组

如果控制面板上的项目太多，可以考虑将一些功能近似的控制项分到一个分组文件夹中，这样可以让结构更加清晰。

var controls = new function () {
    this.rotationSpeed = 0.02;
    this.x = 1;
    this.y = 1;
    this.z = 1;
    this.width = 50;
    this.height = 60;
};

var gui = new dat.GUI();

//第一个分组
var f1 = gui.addFolder('Position');
f1.add(controls, 'x');
f1.add(controls, 'y');
f1.add(controls, 'z');

//第二个分组
var f2 = gui.addFolder('Size');
f2.add(controls, 'width');
f2.add(controls, 'height');
//第二个分组默认打开
f2.open();

六、存储模式

1，开启存储功能模式

（1）使用 remember 方法可以开启 GUI 的存储模式（而且可以分组存储）

var controls = new function () {
    this.speed = 1;
};

var gui = new dat.GUI();
gui.remember(controls);
gui.add(controls, 'speed', 0, 5);

2，存储模式介绍

(1)存储模式开启后效果如下，每个控制项点击“Revert”按钮可以还原成默认值。

（2）点击“Save”可以将当前面板设置的值保存成默认值。点击“New”可以新建一个配置分组。通过下拉框可以切换各个分组（分组切换时控制项的值也会随之改变）。

（3）点击齿轮图标可以看到对应配置分组保存的值。

3，初始化时导入分组配置值

我们也可以把之前保存的分组配置数据在初始化时导入。

var controls = new function () {
    this.rotationSpeed = 0.02;
    this.speed = 1;
};

var gui = new dat.GUI({
  load:{
    "preset": "Default",
    "closed": false,
    "remembered": {
      "Default": {
        "0": {
          "speed": 2.157493649449619
        }
      },
      "Custom1": {
        "0": {
          "speed": 1
        }
      }
    },
    "folders": {}
  }
});

gui.remember(controls);
gui.add(controls, 'speed', 0, 5);

七、获取面板的DOM对象

通过 gui.domElement 我们可以获取到控制面板原生 dom 对象。比如我们将面板位置改成页面左上角。

var controls = new function () {
    this.speed = 1;
};

var gui = new dat.GUI();
gui.add(controls, 'speed', 0, 5);

gui.domElement.style = 'position:absolute;top:0px;left:0px';

八、从 GUI 外部控制配置项

如果我们想不通过操作控制面板，而是从外部修改控制项数据。可以让控制项调用 listen 方法，这样当我们改变数据时，也会同步到面板里。

（1）样例代码

var controls = new function () {
    this.speed = 1;
};

var gui = new dat.GUI();
gui.add(controls, 'speed', 0, 10).listen();

setInterval(function() {
  controls.speed = Math.random() * 10;
}, 500);

（2）可以看到控制面板中 speed 项的值每隔 500ms 就会自动改变一次

九、创建多个 GUI 对象

我们可以通过构造函数 dat.GUI() 创建多个 GUI 对象，每个对象对应的都是一个独立的控制面板。

（1）样例代码

var controls = new function () {
    this.rotationSpeed = 0.01;
    this.x = 0;
    this.y = 0;
    this.z = 0;
};

var gui = new dat.GUI();
gui.add(controls, 'x', -10, 10);
gui.add(controls, 'y', -10, 10);
gui.add(controls, 'z', -10, 10);

var gui2=new dat.GUI();//创建GUI对象
gui2.domElement.style = 'position:absolute;top:0px;left:0px;width:50px';
gui2.add(controls,'rotationSpeed',{低速: 0.005, 中速: 0.01,高速: 0.1});

（2）我们创建两个 GUI 对象，第一个位于默认的右上角位置，第二个放置在界面左上角。效果图如下：