CesiumJS - How can I control the viewer's time and ticks?
What I would like to do is monitor the clock ticks for a non-real time Cesium application. Imagine expensive code running there, plus I want to give the viewer time to load the tiles before continuing. So how do I disable automatic ticking and then call tick () manually when my code is ready to do so?
The docs for Cesium .Clock say: "The clock will be ticked only if both the" Clock "parameters canAnimate and Clock # shouldAnimate are correct." but that's not what I get. What I see now:
viewer.clock.canAnimate = false;
viewer.clock.shouldAnimate = false;
viewer.clock.onTick.addEventListener(function(clock){
console.log("Tick");
});
The result in the console shows that the clock is still ticking:
Tick
Tick
Tick
Tick
...
What I would like to do:
viewer.clock.stopTicking(); // or whatever that command would be...
while (someCondition){
// run expensive code
tick(); // issue manual tick
}
Thank you for your help! Max
source to share
It's a slightly inherited quirk of the Cesium API that raises the Clock event onTick
for every frame of the animation, whether time advances in time or not.
If you want to take control of the Cesium render loop, you can do it like this:
viewer.useDefaultRenderLoop = false;
function myOwnRenderLoop() {
viewer.resize();
viewer.render();
Cesium.requestAnimationFrame(myOwnRenderLoop);
}
Cesium.requestAnimationFrame(myOwnRenderLoop);
The above is what I use requestAnimationFrame
, so the loop runs as fast as possible. But I could replace that with setTimeout
to get a slower loop while emulating poor rendering performance. Note that interactivity and screen updates will slow down in this way when longer intervals are used.
viewer.useDefaultRenderLoop = false;
function myOwnRenderLoop() {
viewer.resize();
viewer.render();
window.setTimeout(myOwnRenderLoop, 500);
}
window.setTimeout(myOwnRenderLoop, 500);
source to share
So yours console.log
still prints 'Tick' because it onTick
keeps on burning no matter if the clock advances. All you have to do is switch both canAnimate
as and shouldAnimate
as you suspected. So your example code would basically be:
viewer.clock.canAnimate = false;
viewer.clock.shouldAnimate = false;
while (someCondition){
// run expensive code
// toggle someCondition so we can exit this
}
// set the animate bools back to true so the clock can advance
viewer.clock.canAnimate = true;
viewer.clock.shouldAnimate = true;
To see it better in action, try this (and maybe set an if condition instead of 1000 instead of 100):
viewer.clock.canAnimate = false;
viewer.clock.shouldAnimate = false;
var s = 0;
viewer.clock.onTick.addEventListener(function(clock){
if (s < 100) {
console.log(viewer.clock.currentTime);
} else {
viewer.clock.canAnimate = true;
viewer.clock.shouldAnimate = true;
}
s++;
});
You will see that it console.log
prints the same value for 100 (or 1000) times ... this is due to currentTime
not being promoted due to canAnimate
and shouldAnimate
. Once both of them are translated to true
, currentTime
will be promoted.
source to share