机器人 Pose、Joint、路径数据由后端按时间戳持续返回。前端不是收到一条就直接更新模型——那样画面只会一顿一顿地跳——而是:
- 为每个机器人维护一份独立的
RobotBuffer; - 用统一的
originTime把后端的绝对时间戳换算成相对动画时间; - 缓存的数量和时间跨度达到阈值后,再建立前端的
playTime开始播放; - 渲染时按当前播放时间,在时间戳 Buffer 里找到前后两个采样点,算出插值比例;
- 位置用
Lerp、姿态用Quaternion SLERP、关节值用线性插值; - 最后把算出的
position、quaternion、jointValues写回URDFRobot和URDFJoint。
这样做把后端数据频率和 Three.js 渲染频率解耦,同时抵抗一定的网络抖动,让机器人运动连续、平滑。
这篇按这个链路走一遍,核心代码都贴出来。