Stats查看渲染性能

下面给大家介绍一个库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 (opens new window)上一个开源库，可以用来辅助查看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各方面知识点，毕竟性能优化需要长期学习，不过本章节，会提供一些快捷简单有效的优化讲解，让新手能短、平、快，掌握一些非常实用的优化技巧。