Animate Model

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I’m trying to animate a model from one point to another using SamplePositionProperty. When the point moves to sampled point, the model disappears. What am I doing wrong?

private start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));

private stop = Cesium.JulianDate.addSeconds(this.start, 360, new Cesium.JulianDate());

private time = Cesium.JulianDate.addSeconds(this.start, 2, new Cesium.JulianDate());

const secondsCounter = interval(6000);

secondsCounter.subscribe(n => {

const property = new Cesium.SampledPositionProperty();

property.forwardExtrapolationType = Cesium.ExtrapolationType.EXTRAPOLATE;

if (n % 3 === 0) {

property.addSample(this.time, Cesium.Cartesian3.fromDegrees(-105.145490, 38.728686));

this.entity.position = property;

} else {

this.entity.position = Cesium.Cartesian3.fromDegrees(-105.145852, 38.728107);

}

});

this.entity = cesiumViewer.entities.add({

name : url,

position : positionCartesian,

model : {

uri : url,

minimumPixelSize : 128,

maximumScale : 7,

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

}

});

viewer setup:

const viewer = new Cesium.Viewer(this.el.nativeElement, {

animation: false,

fullscreenButton: false,

timeline: false,

geocoder: false,

homeButton: false,

sceneModePicker: false,

baseLayerPicker: true,

navigationHelpButton: false,

selectionIndicator: false,

infoBox: false,

terrainProvider : Cesium.createWorldTerrain(),

shouldAnimate: true

});

2

Hi Brian,

Set the SampledPositionProperty.forwardExtrapolationType to ExtrapolationType.HOLD.

Thanks,
Gabby

3

Setting the forward extrapolation type to HOLD, the model doesn’t disappear, but it does not animate either. It jumps from between points.

4

OK, several things:

  1. If you are using SampledPositionProperty, you should set the entity position to the property itself, instead of a position and then modifying it every time you add to the property

position : sampledPositionProperty,

``

and

const sampledPositionProperty = new Cesium.SampledPositionProperty();

property.forwardExtrapolationType = Cesium.ExtrapolationType.EXTRAPOLATE;

// In your update function

if (n % 3 === 0) {

sampledPositionProperty.addSample(this.time, Cesium.Cartesian3.fromDegrees(-105.145490, 38.728686));

} else {

sampledPositionProperty.addSample(this.time, Cesium.Cartesian3.fromDegrees(-105.145852, 38.728107));

}

``

  1. Since you created start, stop, and time variables, I assume you were attempting to set the entity availability:

availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

start : start,

stop : stop

})]),

``

  1. We need to set the current simulation time to one that’s inside your expected time range:

viewer.clock.currentTime = start;

``

You might want to take a look at the Clock demo and this demo which uses SampledPostitionProperty.

Thanks,

Gabby

5

Hi Gabby.

I don’t believe I want to set the availability. I just want a model entity to animate between points, regardless of the time frame. This is a real time use case. I’m not familiar yet with how the clock needs to be set up. Do we need to configure the clock just to animate the movement of the model?

After setting up the params as -

private time = Cesium.JulianDate.addSeconds(new Date(), 2, new Cesium.JulianDate());

private property = new Cesium.SampledPositionProperty();

this.property.forwardExtrapolationType = Cesium.ExtrapolationType.EXTRAPOLATE;

this.property.addSample(this.start, Cesium.Cartesian3.fromDegrees(-105.145490, 38.728686));

this.entity = cesiumViewer.entities.add({

name : url,

position : this.property,

model : {

uri : url,

minimumPixelSize : 256,

maximumScale : 15,

heightReference: Cesium.HeightReference.CLAMP_TO_GROUND

}

});

Polling function {

this.property.addSample(this.time, Cesium.Cartesian3.fromDegrees(-105.145490, 38.728686));

}

The model does not animate, moves to the new points, but doesn’t animate. I assume the sampled property is supposed to animate from one point to the other over a time of 2 seconds? The polling function changes moves the model every 5 seconds.

Also, if we keep adding samples to the sampled position property, I think we could end up with too many sampled positions on that property, that var would get rather large. Can we clear the previous sampled property from the array before adding a new one?

6

I mentioned the clock because the times you are adding the samples at:

private start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));

private stop = Cesium.JulianDate.addSeconds(this.start, 360, new Cesium.JulianDate());

private time = Cesium.JulianDate.addSeconds(this.start, 2, new Cesium.JulianDate());

``

May not match up with the current simulation time, which may have been causing issues.

However, since you want to remove positions, it sounds like your use case is not well suited for using a SampledPositionProperty. Instead use a CallbackProperty for the position. I think that will be much more flexible and provide the functionality you need. Instead of adding samples, you define a function which returns the desired position based on the time.

Thanks,

Gabby

7

If I use the callback property without Sampled Positions, how will the model animate between points? I’m very new to Cesium, and not familiar with all the options available to animate positions.

Thanks Gabby

8

Gabby,

In your opinion, would a dynamically created CZML object be a better approach for this?

9

It depends on what your workflow is- Every time a new CZML is loaded, you will remove the old entity and add a new one, not update the old entity.