02-Three.js 辅助工具

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