Three.js 性能监测工具 Stats.js

目录

前言 

性能监控 

引入 Stats

使用Stats

代码

---

前言 

通过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()

点击该面板时还可以切换监听的类型

设置初始展示类型的另一个方法

除了使用 setMode 设置初始展示的类型外，还可以使用 showPanel 设置。比如设置初始展示的类型是 ms ，就传个 1 进去即可。

stats.showPanel(1)

代码

<script type="module">
  import * as THREE from '../js/Three/src/Three.js' // 引入 Three
  import Stats from '../js/Three/examples/jsm/libs/stats.module.js' // 引入 Stats

  // 创建场景
  const scene = new THREE.Scene()

  // 创建相机（类似人的眼睛，可以看到东西）
  // 创建透视相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)

  // 设置相机对象的位置
  // 分别传入 x y z 轴的坐标
  camera.position.set(10, 10, 10)
  camera.lookAt(scene.position)

  // 将相机添加到场景中
  scene.add(camera)

  // 创建几何体
  const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
  // 设置几何体材质
  const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xffff00})
  // 根据几何体和材质创建物体
  const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

  // 将几何体添加到场景中
  scene.add(cube)

  // 初始化渲染器
  const renderer = new THREE.WebGLRenderer()

  // 设置渲染的尺寸大小
  renderer.setSize(window.innerWidth, window.innerHeight)

  // 把渲染器添加到body里
  // 将 webgl 渲染的 canvas 内容添加到 body
  document.body.appendChild(renderer.domElement)

  // 创建性能监视器
  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()

    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
    cube.rotation.z += 0.01

    renderer.render(scene, camera)
    requestAnimationFrame(render)
  }

  render()
</script>