本文简介
点赞 + 关注 + 珍藏 = 学会了
不论是做游戏还是做一般网页，在这个时代根本都离不开动画。
说到动画，第一个联想到的概念就是“帧”。这是用来掂量和形容动画是否晦涩的一个单位。
在 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 须要做以下几步操作：
- 实例化
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()当点击该面板时还能够切换监听的类型
设置初始展现类型的另一个办法
除了应用 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 从入门到收缩》
点赞 + 关注 + 珍藏 = 学会了
代码仓库