当前位置: > > > Three.js - dat.GUI库的使用详解:下(进阶用法)

Three.js - dat.GUI库的使用详解:下(进阶用法)

四、设置控制项标签文字

默认情况下每个控制项左侧的标签显示的是对应的属性名,我们可以通过 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 对象,第一个位于默认的右上角位置,第二个放置在界面左上角。效果图如下:
评论0