Stats查看threejs渲染性能

参考资料:threejs中文网

threejs qq交流群:814702116

Stats查看threejs渲染性能

下面给大家介绍一个库stats.js,主要功能就是用来辅助查看threejs渲染性能。

回顾:请求动画帧requestAnimationFrame

requestAnimationFrame的功能就是调用函数周期性的执行。

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render();

你可以把渲染函数render()每秒钟执行次数,称为帧率,或者说FPS。

let i = 0;
function render() {
    i+=1;
    console.log('执行次数'+i);
    requestAnimationFrame(render);
}
render();

引入Stats

stats.js是github上一个开源库,可以用来辅助查看threejs渲染帧率。

你可以npm安装stats,也可以引入threejs扩展库中提供的stats.js。文件node_modules,**three/examples/jsm/libs/**目录,你可以找到一个文件stats.module.js

//引入性能监视器stats.js
import Stats from 'three/examples/jsm/libs/stats.module.js';

stats.js github链接:https://github.com/mrdoob/stats.js

使用stats

//创建stats对象
const stats = new Stats();
//stats.domElement:web页面上输出计算结果,一个div元素,
document.body.appendChild(stats.domElement);
// 渲染函数
function render() {
	//requestAnimationFrame循环调用的函数中调用方法update(),来刷新时间
	stats.update();
	renderer.render(scene, camera); //执行渲染操作
	requestAnimationFrame(render); //请求再次执行渲染函数render,渲染下一帧
}
render();

执行上面代码,在网页的左上角会默认显示渲染帧率。

stats辅助查看渲染帧率

渲染函数render()默认每秒执行次数,与你电脑硬件有关,可能60,可能144。

以我电脑显示器为例,默认支持60FPS,这种情况下,render()函数最高就是每秒钟执行60次。但是也不一定能一直维持在电脑显示器支持的最高帧率,还要看两方面,显卡的性能三维场景的复杂程度,具体以你的项目和电脑硬件为准。

查看电脑刷新率

你也可以查看你电脑支持的刷新率,我以win11为例,电脑桌面,鼠标右键,选择显示设置——高级显示器设置,可以查看我电脑默认支持的帧率。

在这里插入图片描述

卡顿问题

如果你鼠标旋转缩放场景时候,能明显感觉到卡顿,这时候stats显示的渲染帧率一般远低于你电脑实际支持的屏幕刷新率。

如果你的项目出现了卡顿问题,你可以继续学习本章节后面内容,了解更多优化技巧,同时也需要系统学习threejs各方面知识点,毕竟性能优化需要长期学习,不过本章节,会提供一些快捷简单有效的优化讲解,让新手能短、平、快,掌握一些非常实用的优化技巧。

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Threejs可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值