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
