Three.js-快速入门教程十四使用Stats.js监控渲染帧率和性能优化

2025-03-06 约 1546 字预计阅读 4 分钟

https://bing.ee123.net/img/rand?artid=146064881

Three.js 快速入门教程【十四】使用Stats.js监控渲染帧率和性能优化

系列文章目录

一、前言

在使用 Three.js 进行 3D 图形开发时，了解场景的渲染性能，特别是渲染帧率（FPS），对于优化和调试应用程序至关重要。Stats.js 是一个轻量级的 JavaScript 库，用于实时监控和显示应用程序的性能指标，其中就包括渲染帧率。在本篇教程中，我们将学习如何在 Three.js 项目中集成 Stats.js 来查看渲染帧率。

二、认识渲染帧率

在 Three.js 里，通常使用 requestAnimationFrame 函数来创建渲染循环,在这个渲染循环中，每次调用 renderer.render()函数就获取一帧的canvas图像，不断调用就形成连续动画并更新到canvas，而帧率就是指浏览器每秒能够成功渲染并展示的动画帧数，也即每秒调用renderer.render()函数次数。

三、为什么需要关注渲染帧率？

在Three.js开发过程中，帧率（FPS）是衡量应用性能的核心指标。60 FPS意味着每秒渲染60帧，这是流畅动画的黄金标准。当帧率低于30 FPS时，用户会明显感受到卡顿。通过实时监控帧率，我们可以：

快速定位性能瓶颈
优化渲染性能
确保跨设备兼容性
提升用户体验

四、Stats.js 的引入与集成

4.1 初始化

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

const stats = new Stats();
//显示模式
stats.showPanel(0); // 0: fps, 1: ms, 2: mb,

4.2 集成到 Three.js 渲染循环

// 主渲染循环
function animate() {
  requestAnimationFrame(animate);
  // 执行渲染
  renderer.render(scene, camera);
   // 更新 Stats
  stats.update();
}
animate();

通过在每次渲染后调用 stats.update()，Stats.js 会计算并更新当前的渲染帧率等性能指标，并在页面上显示出来

面板支持三种模式由stats.showPanel()入参决定：

0：帧率（FPS，Frames Per Second）：此模式下，Stats.js 会显示当前应用程序的渲染帧率，即每秒渲染的帧数。较高的帧率通常意味着更流畅的动画和交互体验。例如在 Three.js 项目中，如果场景复杂导致帧率较低，可能就需要优化场景或硬件来提高这个数值。

1：每帧耗时（MS，Milliseconds per frame）：该模式显示渲染每一帧所花费的时间，单位为毫秒。这个指标可以帮助开发者了解渲染的性能瓶颈，因为每帧耗时越短，理论上可以达到的帧率就越高。如果每帧耗时较长，可能需要检查代码中是否有耗时的计算或复杂的图形操作。

2：内存使用情况（MB，Megabytes of memory used）：此模式用于监控应用程序的内存使用量，以兆字节（MB）为单位。通过观察内存使用情况，开发者可以发现是否存在内存泄漏或不合理的内存占用，及时优化代码以释放不必要的内存资源。

也可以通过setMode动态切换模式

stats.setMode(0);//显示帧率

五、实战配置详解

5.1 自定义显示位置

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms, 2: mb, 3+: custom

//为面板添加class=stats
stats.dom.classList.add('stats')
document.body.appendChild(stats.dom);

css改变面板位置为右上角：

.stats {
 position: fixed!important;
  top: 20px!important;
  left:auto!important;
  right: 20px!important;
  z-index: 1000;
}

页面元素：

运行效果：

5.2 动态调整渲染频率，优化性能

function adaptiveRender() {
  if (stats.getFPS() < 50) {
  //当帧率小于50，关闭渲染器自动清除功能，提高性能
    renderer.autoClear = false;
    // 其他优化措施
  } else {
    renderer.autoClear = true;
  }
}

renderer.autoClear 是 WebGLRenderer 的一个属性，它用于控制在每次渲染之前是否自动清除画布的颜色缓冲区、深度缓冲区和模板缓冲区，当连续多次渲染不需要清除画布时（如分阶段渲染），关闭自动清除可减少 GPU ，优化性能

5.3 性能快照对比

let baseMemory;

function startProfile() {
    baseMemory = stats.current().memory;
}

function endProfile() {
    const diff = stats.current().memory - baseMemory;
    console.log(`内存变化：${diff} MB`);
}

5.4 自动化性能报告

setInterval(() => {
    const report = {
        fps: stats.current().fps,
        frameTime: stats.current().ms,
        memory: stats.current().memory
    };
    analytics.send(report); // 发送到监控平台
}, 10000);

五、总结

通过以上介绍，我们掌握了在 Three.js 项目中集成了 Stats.js 来实时监控和显示渲染帧率。这对于优化 Three.js 应用程序的性能非常有帮助。你可以根据实际需求调整 Stats.js 的显示面板类型，查看更多性能指标，然后根据指标进行渲染优化。

更多three.js入门知识点请关注该系列教程后续的更新。