CODEWITHSUNDEEP
javascriptcesiumjs
user967710
user967710

Reputation: 2007

cesium - moving billboards

I am testing Cesiumjs to see if it can reflect a near-real-time expreience - for example: position of airplanes.

For that, I need to draw billboards and make them move - which I know is possible with cesium, just not sure how.

The code looks like this:

var billboards = scene.primitives.add(new Cesium.BillboardCollection());
var billboard = {
    image : '/path/to/logo.png',
    position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)
};
billboards.add(billboard);

My question is how do I change the position of the billboard. I couldn't find ant documentation that would explain.

I thought doing:

billboard.position = ... //new position

but how will cesium know that I've changed the position attribute unless it somehow turns that reference into a observable object.

So how do I update the location?

Thanks.

Upvotes: 4

Views: 3007

Answers (1)

emackey
emackey

Reputation: 12448

Cesium does indeed listen for changes to billboard.position (source code here), so it is correct behavior for apps to simply write a new position.

Note that you must write the whole position at once, meaning you may not write to billboard.position.x. Instead, keep a "scratch" Cartesian3 around (don't create a new one every animation frame at 60fps), write to the x,y,z properties of your scratch variable, and then assign your scratch variable to billboard.position. You can see in the source that the assigned value will be cloned into another pre-existing Cartesian3, so you may immediately reuse the scratch variable.

Here's an example:

// Just once at app startup.  Don't call "new" at 60fps.
var scratchCartesian3 = new Cesium.Cartesian3();

var ellipsoid = viewer.scene.mapProjection.ellipsoid;

function onTick() {
    // This is safe to call at 60fps.
    billboard.position = Cesium.Cartesian3.fromDegrees(
        lon, lat, alt, ellipsoid, scratchCartesian3);
}

Also note that your question and the above answer are focused on the "Graphics Primitive" layer of the Cesium API. Cesium has one higher layer, called the "Entity" API, that you can use if you want Cesium to handle the concept of user-selectable objects with pop-up descriptions etc. Here's a Sandcastle demo showing how to add a billboard as a property of an entity, instead of as a primitive. This allows you to add other properties to the same entity, for example a name, description, label, 3D model, etc, and have them all be controlled from the same position property, and have Cesium take care of popup descriptions. The position property is more complex for entities than for primitives, for example it can be constant or sampled. This allows entities to change position over time when the timeline is shown.

Upvotes: 4

Related Questions