# Moving an object

**URL:** <https://community.cesium.com/t/moving-an-object/120>\
**Category:** CesiumJS\
**Created:** [October 22, 2012, 1:24pm UTC](https://community.cesium.com/t/moving-an-object/120 "2012-10-22T13:24:02Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [October 22, 2012, 1:24pm UTC](https://community.cesium.com/t/moving-an-object/120/1 "2012-10-22T13:24:02Z")

</div>

Hi!

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?

Tamy

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [October 22, 2012, 9:04pm UTC](https://community.cesium.com/t/moving-an-object/120/2 "2012-10-22T21:04:24Z")

</div>

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

Source is here: [https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/Sandcastle/gallery/Simple%20CZML%20Demo.html](https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Apps/Sandcastle/gallery/Simple%20CZML%20Demo.html)

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

[https://github.com/AnalyticalGraphicsInc/cesium/wiki/CZML-Guide](https://github.com/AnalyticalGraphicsInc/cesium/wiki/CZML-Guide)

```
          --Ed.
```

---

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [October 23, 2012, 11:14am UTC](https://community.cesium.com/t/moving-an-object/120/3 "2012-10-23T11:14:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [October 23, 2012, 2:21pm UTC](https://community.cesium.com/t/moving-an-object/120/4 "2012-10-23T14:21:02Z")

</div>

I created an sphere:

var objeto = new Cesium.EllipsoidPrimitive();

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

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

primitives.add(objeto);

And when the mouse moves, the sphere moves too:

handler.setMouseAction(function (movement) {

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

if (cartesian) {

```
 objeto.center = 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?

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [October 23, 2012, 2:42pm UTC](https://community.cesium.com/t/moving-an-object/120/5 "2012-10-23T14:42:17Z")

</div>

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();
          widget.update(currentTime);
          widget.render();
          Cesium.requestAnimationFrame(updateAndRender);
      }
      updateAndRender();

```

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.

```
   --Ed.
```

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [October 23, 2012, 3:03pm UTC](https://community.cesium.com/t/moving-an-object/120/6 "2012-10-23T15:03:43Z")

</div>

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.)

---

<div class="post-metadata">

**Author:** ![Tamy](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@Tamy](https://community.cesium.com/u/Tamy)\
**Post date:** [October 23, 2012, 6:09pm UTC](https://community.cesium.com/t/moving-an-object/120/7 "2012-10-23T18:09:49Z")

</div>

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

var object = new Cesium.EllipsoidPrimitive();

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

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

primitives.add(object);

.

.

.

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;

   }else{

      x -= 0.1;

   }

   if(y >= 42.5){

      y = 20.0;

   }else{

      y += 0.5625;

   }        

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

}

```

}

function tick() {

```
var now = animationController.update();

update(now);        

scene.render();

Cesium.requestAnimationFrame(tick);

```

}

tick();

---

<div class="post-metadata">

**Author:** ![Rencia\_Cloete](https://avatars.discourse-cdn.com/v4/letter/r/73ab20/32.png) [@Rencia\_Cloete](https://community.cesium.com/u/Rencia_Cloete)\
**Post date:** [March 25, 2014, 7:39am UTC](https://community.cesium.com/t/moving-an-object/120/8 "2014-03-25T07:39:17Z")

</div>

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"....

Thanks  
Rencia

---

<div class="post-metadata">

**Author:** ![Dan\_Bagnell](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Dan\_Bagnell](https://community.cesium.com/u/Dan_Bagnell)\
**Post date:** [March 26, 2014, 9:15pm UTC](https://community.cesium.com/t/moving-an-object/120/9 "2014-03-26T21:15:43Z")

</div>

Hi Rencia,

If you want to depth test against terrain, I suggest you use [EllipsoidGeometry](http://cesiumjs.org/Cesium/Build/Documentation/EllipsoidGeometry.html). See the [Geometry and Appearances tutorial](http://cesiumjs.org/2013/11/04/Geometry-and-Appearances/) for details.

-Dan