图形化开发（二）03-Three.js之性能监测插件stats —— 监听fps-画面每秒传输帧数

图形化开发（二）03-Three.js之性能监测插件stats —— 监听fps-画面每秒传输帧数

在Three.js里面，遇到的最多的问题就是性能问题，所以我们需要时刻检测当前的Three.js的性能。现在Three.js常使用的一款插件叫stats。接下来我们看看如何将stats插件在Three.js的项目中使用：

核心指标：

• FPS: 画面每秒传输帧数。

引入

//1.0、引入
<script src="http://www.wjceo.com/lib/js/libs/stats.min.js"></script>

我们需要实例化一个stats对象，然后把对象内生成的dom添加到页面当中。

//2.0、性能插件  监听fps
stats = new Stats();
document.body.appendChild(stats.dom);

最后一步，我们需要在requestAnimationFrame的回调里面进行更新每次渲染的时间：

//运行动画
function animate() {
    requestAnimationFrame(animate); //循环调用函数
    
    stats.update(); //3.0、更新性能插件
    
	renderer.render( scene, camera ); //渲染界面
}

效果