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进行了封装，实例化后可以实现以下功能
| 操作 | 功能 |
|---|---|
| 按住鼠标左键并移动 | 摄像机围绕场景中心旋转 |
| 转动鼠标滑轮或按住中键并移动 | 放大和缩小 |
| 按住鼠标右键并移动 | 在场景中平移 |
| 上、下、左、右方向键 | 在场景中平移 |