Multiple animations as different speeds and styles

CesiumJS
1

First, apologies if this has been covered before (and for the long post), but I haven’t not found any working examples or sandcastles that have helped me with this so far.

I have a cesiumJS view where I animate a model over a path using the clock at a 1x speed. That works fine. But now I want to add some animations to the GLB model, and run them at different speeds (not linked to the clock which is providing the main model movement along the path).

I have created the animations in blender and exported them in a separate GLB file (for now).
The animations work and play fine, but I can not can not adjust the speed they play at without impacting the speed of the primary model/clock. I am also unable to reset the animations (for example, I have some that do not loop, that I want to play at a certain time, then reset and play again at another time (without any looping).

Is any of this possible with CesiumJS? Play the predefined blender created animations at a different speed (without redefining the animations). or to play/stop/reset some animations programmatically?

All the examples of changing the animation speed I have found, involve changing the clock frequency, but that changes the speed of everything. I don’t want to change the speed of the model along the pre-defined path, just the animations on the model.
Do I need to setup different clocks for each model/animation? Is there any working sandcastle examples of this?

I found this: GitHub - ProminentEdge/Cesium-ModelAnimationPlayer: An animation player for use with Cesium entities to play glTF animations independent of the standard timeline. and that does work to some extent, but the animations loaded from the GLB exported by blender are incorrect (not the same as simply using the GLB in Cesium which works fine). I guess problem with the transformationnode creation, but my head hurts in 3D and I can’t work what is actually wrong with the animations loaded through that method.

2

Hi @PhilGibbons,

It certainly isn’t obvious from the examples we have how to do this. :smile:

I modified the Manually Controlled Animation Sandcastle example based on the ModelAnimation.AnimationTimeCallback reference documentation, and was able to disconnect the scene simulation time clock:

  const modelPrimitive = viewer.scene.primitives.add(
    await Cesium.Model.fromGltfAsync({
      url: "../SampleData/models/CesiumMan/Cesium_Man.glb",
      scale: 4,
    }),
  );

  modelPrimitive.readyEvent.addEventListener(() => {
    modelPrimitive.activeAnimations.animateWhilePaused = true;
    modelPrimitive.activeAnimations.addAll({
      loop: Cesium.ModelAnimationLoop.REPEAT,
      animationTime: function (duration) {
        return Date.now() / 1000 / duration;
      },
      multiplier: 0.25,
    });
  });

That documentation also shows some ways to set the looping, offset, etc. of each animation, so hopefully that gets you on the right track.

Thanks,
Gabby