Flying animation


  1. I have a function FlyTo(camera, lon,lat,altitude, heading,pitch,roll) for a camera
    to simulate a movement of a plane. It works very nice with terrain data.

Now the problem I am facing is the animation.

cannot use CameraFlightPath as it turns the camera upside down. I guess this function is to fly at least 500 miles distance like a rocket hiting its target.

If the frequency of the data I receive is 1000ms, then the animation when I call my function is like with a lag effect. If I increase the frquency then it is much better, however I
cannot push the limits(I do not want to querry the flying server with request every 1ms). What I would like to have is nice animation when I move from Point1 with camera set to another point with another camera set with minimal and optimal movement in the specified time,

Imagine I receive 1 data

POINT1 (lon,lat,alititude,heading,pitch,roll) 0,49,5000,90,0,0
after 1 second we are at
POINT2 0,49.0001,4999,92,0,2
instead of moving my camera imediatelly (with lag effect) to the next Point, I would like
it to FLY the distance and smoothly change camera setting in the specified time (1 second in this example)

Is it possible to do it with Cesium current version ?



You can add an animation like this:

viewer.clock.onTick.addEventListener(function(clock) {

if (animateCamera) {

var t = (currentTime - startTime) / (endTime - startTime);

camera.position = Cesium.Cartesian3.lerp(point1, point2, t);

// similarly interpolate orientation



If “animateCamera” is true, then the times and positions are expected to be set for the current animation. You also only want to animate when 0 <= t <= 1. The example above only uses simple linear interpolation for the position.

You should check out SampledProperty. Set the interpolation method, add samples and then get the value at the current clock time. The example above would become:

viewer.clock.onTick.addEventListener(function(clock) {

camera.position = sampledPosition.getValue(time);

/// set camera orientation




I know this was posted 2 years ago, but I hope that you can help me.

I tried animating the camera using the second method Dan suggested:

viewer.clock.onTick.addEventListener(function(clock) {
    var time = clock.currentTime;
    camera.position = sampledPosition.getValue(time);


Now I have a problem with clock's tick. It actually slows down, but only if I set the camera's position within the event listener. (So just .getValue(...) is ok, but setting camera.position with it is the problem).
"Tick slows down": The camera should move for 3 seconds, but needs 10 seconds to finish the path.
So I logged the seconds into the console. If I don't animate the camera, the output is normal, and the numbers advance in the same speed as my real-time clock on the wall.
But if I animate the camera (that is, setting camera.position), the output needs like 10 seconds to print out numbers worth 3 seconds. Besides, I get the following example output:

(6) 12522.88397500001
(6) 12522.93173500001
(6) 12522.97378500001

The (6) means that Chrome didn't want to print 6 times the same number...
So if my Event Handler is called everytime clock ticks, why didn't the clock tick number change over 6 event listener calls? And how is it possible that the tick speeds slows down when I touch the camera's position? How is it even possible to change the tick speed without manipulating the ClockStep or its multiplier?
Btw, Multiplier is 1, ClockStep is SYSTEM_CLOCK_MULTIPLIER, so not tick-dependent.

I hope you can help me.

Kind regards,

Hi Anne,

Printing to the console every frame can slow down an application. Does the camera work better when you remove the console.log statement?

I’m not sure exactly what you’re trying to do, but have you seen this demo:

Look at the ‘Fly in a city’ example. That might be an alternate way of animating the camera.



Hi Hannah,
thanks for your answer.

I know that printing to the console slows down the app. The point is, I always printed to the console. The only thing I changed is setting the camera's position.
Furthermore, the position path was calculated to be finish within 3 seconds, but my camera moves for like 10 seconds.
So, when I print the current time when the animation starts, and print the current time when the animation stops (clock.currentTime.secondsOfDay), it prints these two values:
That means, that 2.5 seconds have past, if you ask the viewer.clock (and that 2.5 seconds are exactly what I wanted). But actually, between those to console prints, 8 seconds had passed. I took the time with my stopwatch. It is ok for my app to slow down, but tick should stay constant if not frame dependent.

I know the flyTo-Functions of the camera. The point is, I'd like to interpolate the camera's path with Hermite or Lagrange to make the camera movement smoother between series of destinations. There is this demo where the model is animated like that:

And I thought I could do this with the camera, too.

Kind regards,

so I think I found the problem:

If I manipulate the camera's position or orientation using camera.position, camera.setView() or camera.rotate(), clock.canAnimate is set to false.
According to doc: "Indicates whether tick can advance time. This could be false if data is being buffered, for example. The clock will only tick when both canAnimate and shouldAnimate are true."

Which kind of data could this be?

I don't know why canAnimate is set to false when I try to manipulate the camera.
Viewer._onTick() changes canAnimate, and I suppose there are good reasons to do that.
But I can't reproduce this in the sandcastle.

Have you any hints on something I can look for?

I don't want to use camera.flyTo() because there are no smooth transitions between the flights.

Kind regards,