Moving an object


I want to know if there’s any way to move objects (a Polygon, for example) on the map like an animation, where the object follows a line or a set of points, with a speed or time.

How can I do it? Could someone show me an example, please?


Check out the “Simple CZML Demo” example in the Sandcastle gallery (you may have to scroll the gallery to the right).

Source is here:

CZML is our JSON schema for describing values that change over time, and Hermite Spline is one of the available interpolations on it.


Thank you Ed, but CZML is very complicated. I want to do it only with cesium using Clock, AnimationController or something similar.

I created an sphere:

var objeto = new Cesium.EllipsoidPrimitive(); = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-44.397211,-2.37284, 200000.0));

objeto.radii = new Cesium.Cartesian3(90000.0, 90000.0, 90000.0);


And when the mouse moves, the sphere moves too:

handler.setMouseAction(function (movement) {

var cartesian = scene.pickEllipsoid(movement.endPosition);

if (cartesian) { = cartesian;


}, Cesium.MouseEventType.MOVE);

But I want to create a kind of clock to set the sphere position every x milliseconds. Without mouse events.

Is it possible with Cesium only?

One way to do this is to use a custom render loop that updates the position. The CesiumWidget has a helper function called “startRenderLoop()” that you can replace with something like the following:

      var animationController = widget.animationController;
      function updateAndRender() {
          var currentTime = animationController.update();

In this loop, notice how it gets the currentTime from the animationController. You can update the position of your object based on time before calling the render function.


Minor correction, I mentioned “CesiumWidget”, but currently in master “CesiumViewerWidget” is the only widget with an animationController. (I have a new branch going called vanilla-widget, where all widgets get animationControllers, but it’s a ways out from being pull-requested yet.)

Thank you for help Ed! I change the code and it works well:

var object = new Cesium.EllipsoidPrimitive(); = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-44.397211,-2.37284, 200000.0));

object.radii = new Cesium.Cartesian3(90000.0, 90000.0, 90000.0);





var clock = new Cesium.Clock();

var animationController = new Cesium.AnimationController(clock);

var x = -48.5;

var y = 20.0;

var time = new Cesium.JulianDate();

function update(now){

if(time.getSecondsDifference(now) > 0.2){  // 0.2 controls the speed

   time = now;

   if(x <= -52.5){

      x = -48.5;


      x -= 0.1;


   if(y >= 42.5){

      y = 20.0;


      y += 0.5625;

   }    = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(x,y,0.0));    



function tick() {

var now = animationController.update();






Hi. Thanks for raising this Tamy and for the answers Ed. It might give me the solution to my current issue, except, HELP!
EllipsoidPrimitive doesn't listen to centralBody.depthTestAgainstTerrain = true;

How do I occlude the part of the EllipsoidPrimitive that is below the surface?
I am needing to move the Ellipsoid along with the vehicle to which it is "attached"....


Hi Rencia,

If you want to depth test against terrain, I suggest you use EllipsoidGeometry. See the Geometry and Appearances tutorial for details.