requestAnimationFrame调节帧率

K歌、之王

已于 2024-06-11 09:05:29 修改

阅读量462

点赞数 1

分类专栏： threejs 文章标签：前端

于 2023-08-04 15:38:07 首次发布

本文链接：https://blog.csdn.net/u010568976/article/details/132105907

版权

threejs 专栏收录该内容

29 篇文章 11 订阅

订阅专栏

let frameCount = 0;
const framesPerUpdate = 2; // 每2帧执行一次动画逻辑

function animate() {
  frameCount++;

  // 在这里执行你的动画逻辑
  // ...

  // 控制每两次循环执行一次动画逻辑
  if (frameCount % framesPerUpdate === 0) {
    // 在这里执行你的动画逻辑

    // 重置帧计数器
    frameCount = 0;
  }

  // 调用requestAnimationFrame，形成动画循环
  requestAnimationFrame(animate);
}

let lastTime = performance.now();
let frameCount = 0;
let fps = 0;

function update() {
    // Get the current time
    const now = performance.now();
    // Calculate the time difference since the last frame
    const delta = now - lastTime;

    frameCount++;
    if (delta >= 1000) {
        // Update the FPS value
        fps = frameCount / (delta / 1000);
        // Reset the counters
        frameCount = 0;
        lastTime = now;
        // Log the FPS
        console.log(`FPS: ${fps.toFixed(2)}`);
    }

    // Request the next frame
    requestAnimationFrame(update);
}

// Start the update loop
update();