前言

通过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 需要做以下几步操作：

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