关于前端:Threejs-性能监视器-Stats

本文简介

点赞 + 关注 + 珍藏 = 学会了

不论是做游戏还是做一般网页，在这个时代根本都离不开动画。

说到动画，第一个联想到的概念就是“帧”。这是用来掂量和形容动画是否晦涩的一个单位。

在 Three.js 中也有一款检测帧数 (FPS) 的工具，叫做 Stats.js。

这款工具是 Three.js 作者开发的。

用法非常简单，罕用的办法也就那几个，本文应用该工具检测一个简略动画的帧数。

入手编码

引入 Stats

在应用 npm install three 下载的依赖包中曾经蕴含了 Stats.js 了

能够这样引入到我的项目中

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)

更新监听数据的另一个办法

除了应用 update 更新监听到的数据变动之外，还能够应用 begin 和 end 组合。

stats.begin()
// 两头夹着要监听的动画或其余代码
stats.end()

begin 和 end 两头能够夹着要统计的代码，它们会帮你计算出这段代码执行的均匀帧数。

残缺代码

<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>

代码仓库

⭐Three.js 性能监视器 Stats

举荐浏览

👍《『Three.js』腾飞！》

👍《『Three.js』辅助坐标轴》

👍《『Three.js』场景 Scene》

👍《『Three.js』几个简略的入门动画（老手篇）》

👍《Three.js 这样写就有暗影成果啦》

👍《Fabric.js 从入门到收缩》

点赞 + 关注 + 珍藏 = 学会了
代码仓库