# 前言
通过 stats.js 库可以查看 three.js 当前的渲染性能，具体说就是计算 three.js 的渲染帧率 (FPS), 所谓渲染帧率 (FPS)，简单说就是 three.js 每秒钟完成的渲染次数，一般渲染达到每秒钟 60 次为最佳状态。
# 性能监控
github 地址: https://github.com/mrdoob/stats.js/blob/master/src/Stats.js
- FPS 在最近一秒渲染的帧数量。数值越高，性能越好.
- MS 渲染帧所需的毫秒数。数值越低，性能越好.
- MB 占用的内存大小
# 引入 Stats
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 ()
// 创建性能监视器 | |
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() |
