Three.js 性能监视器 Stats


theme: smartblue

我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第3篇文章,点击查看活动详情


微信图片_20220905085711.jpg

封面图:掘友留白大哥的自拍(有图有真相)

本文简介

点赞 + 关注 + 收藏 = 学会了

不管是做游戏还是做普通网页,在这个时代基本都离不开动画。

说到动画,第一个联想到的概念就是“帧”。这是用来衡量和描述动画是否流畅的一个单位。

Three.js 中也有一款检测帧数(FPS)的工具,叫做 Stats.js

01.png

这款工具是 Three.js 作者开发的。

用法非常简单,常用的方法也就那几个,本文使用该工具检测一个简单动画的帧数。

动手编码

引入 Stats

在使用 npm install three 下载的依赖包中已经包含了 Stats.js

可以这样引入到项目中

js import Stats from 'three/examples/jsm/libs/stats.module.js'

使用 Stats

要使用 Stats 需要做以下几步操作:

  1. 实例化 Stats
  2. 设置初始面板 stats.setMode(0) 。传入面板id(0: fps, 1: ms, 2: mb)
  3. 设置监视器的位置
  4. 将监视器添加到页面中
  5. 刷新帧数 stats.update()

02.gif

代码如下所示

```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() ```

当点击该面板时还可以切换监听的类型

03.gif

设置初始展示类型的另一个方法

除了使用 setMode 设置初始展示的类型外,还可以使用 showPanel 设置。

比如设置初始展示的类型是 ms ,就传个 1 进去即可。

04.gif

js stats.showPanel(1)

更新监听数据的另一个方法

除了使用 update 更新监听到的数据变化之外,还可以使用 beginend 组合。

js stats.begin() // 中间夹着要监听的动画或其他代码 stats.end()

beginend 中间可以夹着要统计的代码,它们会帮你计算出这段代码执行的平均帧数。

完整代码

05.gif

```html

```

代码仓库

Three.js 性能监视器 Stats

推荐阅读

👍《『Three.js』起飞!》

👍《『Three.js』辅助坐标轴》

👍《『Three.js』场景 Scene》

👍《『Three.js』几个简单的入门动画(新手篇)》

👍《Three.js 这样写就有阴影效果啦》

👍《Fabric.js 从入门到膨胀》

点赞 + 关注 + 收藏 = 学会了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值