Three.js利用性能插件stats实现性能监听的方法
(编辑：jimmy 日期: 2025/11/5 浏览：3 次 )
前言
关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。
帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示
关于性能：测试一个程序，性能上是否有瓶颈，在3D世界里，经常使用帧数的概念，首先我们来定义一下帧数的意义。
帧数：图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）来表示
stats性能插件添加了以后，会默认在左上角显示性能帧数，每次刷新所用时间，占用内存。鼠标左键点击可进行切换，默认显示每秒的帧数。
首先需要将stats插件引入，地址是官网下载文件里面的examples/js/libs/stats.min.js。
然后需要实例化一个组件，然后添加到dom当中。
//初始化性能插件
var stats;
function initStats() {
stats = new Stats();
document.body.appendChild(stats.dom);
}
需要在requestAnimationFrame()函数调用里面更新stats。
function animate() {
//更新控制器
controls.update();
render();
//更新性能插件
stats.update();
requestAnimationFrame(animate);
}
就这样，页面当中就会显示出来正常插件效果了。
设置默认显示的监听。
Stats.prototype.setMode()方法可以设置插件的默认监听
stats.setMode(0); //默认的监听fps stats.setMode(1); //默认的监听画面渲染时间 stats.setMode(2); //默认的监听当前的不知道是啥
案例也是用的上一节的案例写的，全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
canvas {
display: block;
}
</style>
</head>
<body onload="draw();">
</body>
<script src="/UploadFiles/2021-04-02/three.js">
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。
下一篇：Three.js入门之hello world以及如何绘制线