Three.js利用性能插件stats实现性能监听实例详解

巴扎黑
发布: 2017-09-26 09:38:00
原创
2374 人浏览过

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); //默认的监听当前的不知道是啥
登录后复制

案例也是用的上一节的案例写的,全部代码:


    Title  
登录后复制

以上是Three.js利用性能插件stats实现性能监听实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!