ThreeJS 什么方法可以检测每秒屏幕刷新率

Question

ThreeJS 可以检测每秒屏幕刷新率吗？还是有什么方法可以直接检测到？跟new Stats()有关系吗？

Answer 1

代码如下：

/**
 * @param {number} targetCount 不小于1的整数，表示经过targetCount帧之后返回结果
 * @return {Promise<number>}
 */
const getScreenFps = (() => {
  // 先做一下兼容性处理
  const nextFrame = ([
    window.requestAnimationFrame,
    window.webkitRequestAnimationFrame,
    window.mozRequestAnimationFrame
  ]).find(fn => fn)
  if (!nextFrame) {
    console.error('requestAnimationFrame is not supported!')
    return
  }
  return (targetCount = 50) => {
    // 判断参数是否合规
    if (targetCount < 1) throw new Error('targetCount cannot be less than 1.')
    const beginDate = Date.now()
    let count = 0
    return new Promise(resolve => {
      (function log() {
        nextFrame(() => {
          if (++count >= targetCount) {
            const diffDate = Date.now() - beginDate
            const fps = (count / diffDate) * 1000
            return resolve(fps)
          }
          log()
        })
      })()
    })
  }
})()

调用示例：

// 可以传一个不小于1的整数，理论上来说数字越大，结果越精确或者说越平均，但是等待时间也就越长
// 实测50是最理想的，结果比较精确了，小于50结果偏差会比较大
// 参数不传默认值就是50
// 60帧的电脑屏幕测试结果在61和62之间浮动，120帧的手机测试结果在121和122之间浮动
getScreenFps().then(fps => {
  console.log('当前屏幕刷新率为', fps)
})