Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,而下面这篇文章主要给大家介绍了关于Three.js如何利用性能插件stats实现性能监听的相关资料,需要的朋友可以参考借鉴,下面来一起学习学习吧。
前言
关于性能:测试一个程序,性能上是否有瓶颈,在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); //默认的监听当前的不知道是啥
案例也是用的上一节的案例写的,全部代码:
以上是Three.js利用性能插件stats实现性能监听实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!