dat.GUI

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

定义一个 JavaScript 对象（这里假设叫做 controls），该对象将保存希望通过 dat.GUI 改变的属性。

基础设置

创建一个GUI实例，并其添加待监听的对象、对象中具体的监听值、其他配置。当用户对 dat.GUI 控件进行操作时，对应的属性值也会同步修改。

var gui = new dat.GUI();
var controls = new function () {
    this.rotationSpeed = 0.02;
    this.text= "hello world";
};
gui.add(controls, 'rotationSpeed');
gui.add(controls, 'text');

根据被监听对象的初始值类型，会自动生成对应的GUI界面。

• 为数字时可以设置最大值、最小值、步长，或为下拉框

gui.add(controls, 'rotationSpeed').min(0);
gui.add(controls, 'rotationSpeed').max(100);
gui.add(controls, 'rotationSpeed', 0, 0.5).step(0.1);
gui.add(controls, 'rotationSpeed', { Stopped: 0, Slow: 0.01, Fast: 0.5 });

注意采用下拉框时有bug，选中值会变为string类型，建议使用get/set存取器

var controls = {
  _rotationSpeed:0.02,
  get rotationSpeed() {
    return this._rotationSpeed
  },
  set rotationSpeed(v) {
    this._rotationSpeed = Number(v)
  }
};
controls.rotationSpeed = 0.04;

• 为字符串时可以为下拉框

gui.add(controls, 'site', [ 'google.com', 'hangge.com', '163.com' ]);

• 为布尔值时为一个checkbox
• 为函数时为一个button
• 为颜色时需使用addColor添加

var controls = new function () {
    this.color0 = "#ffae23"; // CSS string
    this.color1 = [0, 128, 255]; // RGB array
    this.color2 = [0, 128, 255, 0.3]; // RGB with alpha
    this.color3 = {h: 350, s: 0.9, v: 0.3}; // Hue, saturation, value
};
var gui = new dat.GUI();
gui.addColor(controls, 'color0');
gui.addColor(controls, 'color1');
gui.addColor(controls, 'color2');
gui.addColor(controls, 'color3');

控制项分组

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();

事件监听

对于面板中的每一个控制项，我们都可以设置 onChange 和 onFinishChange 监听事件。

var controls = new function () {
    this.speed = 1;
};
 
var gui = new dat.GUI();
var speedController = gui.add(controls, 'speed', 0, 5);
 
//对应控制项值改变时响应（比如拖动滑块过程中）
speedController.onChange(function(value) {
  console.log("onChange:" + value)
});
 
//对应控制项值修改完毕响应
speedController.onFinishChange(function(value) {
  console.log("onFinishChange" + value)
});

其他功能

• 双向绑定
  GUI中只是单向绑定，仅能通过setValue方法可以改变GUI中的值。结合Vue的数据劫持即可实现双向绑定。

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

或直接通过.listen()实现监听

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

• 命名

gui.add(controls, 'speed', 0, 5).name("速度");

• 操作GUI的面板dom
  通过domElement属性可以选中GUI的面板dom

var gui = new dat.GUI();
gui.domElement.style = 'position:absolute;top:0px;left:0px';

• 储存模式
  使用 remember 方法可以开启 GUI 的存储模式，将当前值作为默认值

var controls = new function () {
    this.speed = 1;
};
var gui = new dat.GUI();
gui.remember(controls);
gui.add(controls, 'speed', 0, 5);

也可以在初始化时导入数据

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);

---

stats

用于检测帧率或性能

var stats = new Stats();
stats.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom
document.body.appendChild(stats.dom);
// 检测全局
requestAnimationFrame(function loop() { stats.update(); requestAnimationFrame(loop) });
// 检测部分
function animate() {
  stats.begin();
  // monitored code goes here
  stats.end();
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

---

ThreeBSP

用于进行几何体的布尔运算(差集、并集、交集)
将Mesh实例转为ThreeBSP实例，然后进行intersrct、union、subtract运算返回新的ThreeBSP实例，最后通过toMesh方法转回Mesh(此时原有的材料会丢失，需重新为mesh修改material)

var cylinderBSP = new ThreeBSP(cylinderMesh);
var boxBSP = new ThreeBSP(boxMesh);
var result = cylinderBSP.subtract(boxBSP);
//ThreeBSP对象转化为网格模型对象
var mesh = result.toMesh();
scene.add(mesh);//网格模型添加到场景中

---

OrbitControls

对camera进行了封装，实例化后可以实现以下功能

操作	功能
按住鼠标左键并移动	摄像机围绕场景中心旋转
转动鼠标滑轮或按住中键并移动	放大和缩小
按住鼠标右键并移动	在场景中平移
上、下、左、右方向键	在场景中平移