Three.js 实时机器人动画:时间戳插值与缓冲

机器人 Pose、Joint、路径数据由后端按时间戳持续返回。前端不是收到一条就直接更新模型——那样画面只会一顿一顿地跳——而是:

  • 为每个机器人维护一份独立的 RobotBuffer;
  • 用统一的 originTime 把后端的绝对时间戳换算成相对动画时间;
  • 缓存的数量和时间跨度达到阈值后,再建立前端的 playTime 开始播放;
  • 渲染时按当前播放时间,在时间戳 Buffer 里找到前后两个采样点,算出插值比例;
  • 位置用 Lerp、姿态用 Quaternion SLERP、关节值用线性插值;
  • 最后把算出的 position、quaternion、jointValues 写回 URDFRobot 和 URDFJoint。

这样做把后端数据频率和 Three.js 渲染频率解耦,同时抵抗一定的网络抖动,让机器人运动连续、平滑。

这篇按这个链路走一遍,核心代码都贴出来。

阅读更多