Three.js 工程向：Clock、deltaTime 与固定步长主循环

文章目录

• • 一、为什么要统一时间步长
  • [二、Clock 的正确使用](#二、Clock 的正确使用)
  • 三、固定步长主循环
  • 四、常见坑
  • 五、结语

一、为什么要统一时间步长

Three.js 渲染帧率会波动，直接把 deltaTime 用在所有逻辑会导致回放不稳定、物理抖动。

二、Clock 的正确使用

clock.getDelta() 适合动画与相机控制更新；elapsedTime 适合统计与周期效果。

三、固定步长主循环

const STEP = 1 / 60;
acc += clock.getDelta();
while (acc >= STEP) {
  updateLogic(STEP);
  acc -= STEP;
}
render();

这样可保证逻辑层的确定性，同时保持渲染层流畅。

四、常见坑

• 切后台后首帧 delta 过大，需 clamp。
• 物理与动画混用时，避免双重时间缩放。

五、结语

工程里建议"逻辑固定步长、渲染可变步长"，兼顾稳定性与视觉流畅度。