Three.js 性能监视器 Stats
theme: smartblue
封面图:掘友留白大哥的自拍(有图有真相)
本文简介
点赞 关注 收藏 = 学会了
不管是做游戏还是做普通网页,在这个时代基本都离不开动画。
说到动画,第一个联想到的概念就是“帧”。这是用来衡量和描述动画是否流畅的一个单位。
在 Three.js
中也有一款检测帧数(FPS)的工具,叫做 Stats.js
。
这款工具是 Three.js
作者开发的。
用法非常简单,常用的方法也就那几个,本文使用该工具检测一个简单动画的帧数。
动手编码
引入 Stats
在使用 npm install three
下载的依赖包中已经包含了 Stats.js
了
可以这样引入到项目中
js import Stats from 'three/examples/jsm/libs/stats.module.js'
使用 Stats
要使用 Stats
需要做以下几步操作:
- 实例化
Stats
- 设置初始面板
stats.setMode(0)
。传入面板id(0: fps
,1: ms
,2: mb
) - 设置监视器的位置
- 将监视器添加到页面中
- 刷新帧数
stats.update()
代码如下所示
```js // 创建性能监视器 let stats = new Stats()
// 设置监视器面板,传入面板id(0: fps, 1: ms, 2: mb) stats.setMode(0)
// 设置监视器位置 stats.domElement.style.position = 'absolute' stats.domElement.style.left = '0px' stats.domElement.style.top = '0px'
// 将监视器添加到页面中 document.body.appendChild(stats.domElement)
function render() {
// 更新帧数 stats.update()
// 渲染界面 renderer.render(scene, camera) requestAnimationFrame(render) }
render() ```
当点击该面板时还可以切换监听的类型
设置初始展示类型的另一个方法
除了使用 setMode
设置初始展示的类型外,还可以使用 showPanel
设置。
比如设置初始展示的类型是 ms
,就传个 1
进去即可。
js stats.showPanel(1)
更新监听数据的另一个方法
除了使用 update
更新监听到的数据变化之外,还可以使用 begin
和 end
组合。
js stats.begin() // 中间夹着要监听的动画或其他代码 stats.end()
begin
和 end
中间可以夹着要统计的代码,它们会帮你计算出这段代码执行的平均帧数。
完整代码
```html
```
代码仓库
推荐阅读
点赞 关注 收藏 = 学会了
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhghefgj
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
怎样阻止微信小程序自动打开
PHP中文网 06-13