How can you synchronize glb animations in a multiplayer game?

Questions
1

In a multiplayer game I’m buildling, I’m importing an elevator glb model which animates moving up and down, using AnimationMixer and clipAction.

I want the position of the elevator to be synchronized across multiple sessions that are in the same room; sessions communicate their positions and other things to one another over websocket.

I’ve attempted to write code like this:

let animationMixer: AnimationMixer;
function animateModel(model: Group, animations: AnimationClip[]) {
    animationMixer = new AnimationMixer(model);

     const clipActions = animations.map((clip) => animationMixer.clipAction(clip));

      clipActions.forEach((action) => action.play());

      const currentTime = (new Date().getTime()) / 1000;
      animationMixer.setTime(currentTime);
}

// r3f function:
useFrame((_, delta) => {
   animationMixer?.update(delta);
})

However, this doesnt seem to always work, especially if there are many elements in the scene, the elevator position gets out of sync.

Anyone have any strategies or suggestions for doing this?

2

Keep the currentTime variable synchronized by making your server control it, instead of having each user determine their own time. Then you can broadcast it to all players along with the positions and all the other variables you’re already sharing.

3

Right but this runs on an animation. Are you suggesting the server update the currentTime for the models animations on an interval?

4

I’m thinking since it’s an elevator animation, all players should see the elevator in the same position at any given time. So your server should control that. Maybe broadcast a variable like elevatorProgress from the server to all players, and then on the client-side you can update the model’s animation with that variable.