Moving an object

CesiumJS
1

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

2

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

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

          --Ed.
3

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

4

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?

5

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

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

7

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();

8

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

9

Hi Rencia,

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

-Dan