图形化开发(二)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 ); //渲染界面
}
效果