three.js学习2-性能监测工具stats.js

1.安装

npm i stats.js

2.组件引入

import * as Stats from 'stats.js'

3.使用，requestAnimationFrame循环调用的函数中调用方法update()，来刷新时间

//创建性能检测
 let stats = new Stats()
 stats.showPanel(0) // 0: fps, 1: ms, 2: mb, 3+: custom
 document.body.appendChild(stats.dom) 


function animate() {
        renderer.render(scene, camera)
        stats.update()
        requestAnimationFrame(animate)

        if (resizeRendererToDisplaySize(renderer)) {
            const canvas = renderer.domElement
            camera.aspect = canvas.clientWidth / canvas.clientHeight
            camera.updateProjectionMatrix()
        }
    }

4.结果