目录

前言 

性能监控 

引入 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' // 引入 Threeimport 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 内容添加到 bodydocument.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.01cube.rotation.y += 0.01cube.rotation.z += 0.01renderer.render(scene, camera)requestAnimationFrame(render)}render()
</script>