stats.js
JavaScript性能监控器，同样也可以测试webgl的渲染性能，在动画运行时，该库可以在一个图形中显示画面每秒传输帧数
代码示例
// 引入js文件
<script src="../js/libs/stats.min.js"></script>
// HTML添加div元素，用于显示图形
<div id="stats-output"></div>
// JS 初始化
var stats = new Stats();
// 如果参数设置为“0”，那么我们检测的是画面每秒传输帧数（fps），如果参数设置为1，则检测的是画面渲染时间
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.getElementById("stats-output").appendChild(stats.domElement);
// 在动画方法中调用
stats.update();
dat.gui.js
可以用来控制Javascript的变量，简化实验流程，改变代码变量的界面组件
代码示例
<script src="../js/libs/dat.gui.js"></script>
// 创建一个对象，用于需要改变的属性
var controls = new function() {
this.rotationSpeed = 0.02;
}
// 将对象传递给dat.GUI, 并设置属性的取值范围
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5)
// 执行渲染动画操作
function animate() {
stats.update();
// 循环的绘制
requestAnimationFrame(animate);
mesh.rotation.x += controls.rotationSpeed;
mesh.rotation.y += controls.rotationSpeed;
renderer.render( scene, camera );
}
放一篇对dat.gui讲解到位的文章：https://zhuanlan.zhihu.com/p/47752059
