three.js学习笔记 dat.gui.js和stats.js

  Three.js创建的3D场景中常用到的插件包括dat.gui.js和stats.js。

  dat.gui.js用于创建菜单栏，可以用来控制场景中的各个参数来调试场景。

  stats.js用于对JavaScript进行性能检测。

 

 dat.gui.js

1.定义要控制的参数，以相机的位置为例

var controls = new function() {
this.cx = 0;
this.cy = 0;
this.cz = 0;
this.redraw = function() {
camera.position.set(controls.cx, controls.cy, controls.cz);
}
}

cx、cy、cz为相机的x、y、z轴坐标。初始值为前面场景初始化定义相机的位置。

redraw是当参数变化时的重绘函数。

2.创建面板

var gui = new dat.GUI();
gui.add(controls, 'cx', -100, 100).onChange(controls.redraw);
gui.add(controls, 'cy', -100, 100).onChange(controls.redraw);
gui.add(controls, 'cz', -100, 100).onChange(controls.redraw)

往菜单中添加cx、cy、cz三个参数。
定义参数变化范围是 -100 ~100 。
定义参数变化时调用redraw()函数。

stats.js

1.实例化一个stats对象

var stats = new Stats();

stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);

setMode()函数 0：fps,1：ms

2.更新

function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
stats.update();
}

调用update()函数实时更新。

fork me on github blog: https://chenjy1225.github.io/