How to Create a Separate Clock and control it with Custom control in Cesium Js

I’m working in a simulation project where I need to apply animations on different entities. Project demanding is to create custom control to Play/Pause animations. Entities are using Interpolated Paths to move on them. As shown in this example.

I want to apply a separate Clock rather then using default viewer.clock. Hence I’ve tried to modified the above example. Here is the link

I’ve created a separate clock as:

var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(
  start,
  360,
  new Cesium.JulianDate()
);

//Make sure viewer is at the desired time.
var clock = new Cesium.Clock();
clock.startTime = start.clone();
clock.stopTime = stop.clone();
clock.currentTime = start.clone();
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 10;
clock.shouldAnimate = true;
var clockViewModel = new Cesium.ClockViewModel(clock);
var viewModel = new Cesium.AnimationViewModel(clockViewModel);

and tried to calling them like:

Sandcastle.addDefaultToolbarButton("Start", function () {
  viewModel.pauseViewModel.command();
});

Sandcastle.addDefaultToolbarButton("Stop", function () {
  viewModel.pauseViewModel.command();
});

But animation is not starting. Also not getting any exception. Please correct me.

Answer

Why didn’t the animation start?

Note that the animation is performed with the clock of viewer in CesiumJS.
In your code viewer ‘s clock is different from your custom clock.
I mean viewer ‘s clock ‘s year is 2021 and your clock’s year 2015.
So the availability of your entity(Cesium_Air.glb) will be false and finally, ModelVisualizer skips the rendering of your entity.

Solution
You should synchronize the clock of the viewer with your custom clock so that the availability of your entity becomes true.

Here is a Sandcastle link. Here is a source code.