How can i smoothly animate polygons?

CesiumJS
1

When I try to animate a polygon by changing the height repeatedly, it works great for 10fps (100ms interval), but when I want to do it more frequently(f.e. 100fps, 10ms interval) it doesnt show any height change at all. Is this a bug or am i just doing it wrong?

var viewer = new Cesium.Viewer('cesiumContainer');

var polygon100 = viewer.entities.add({
    name : 'Green extruded polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-108.0, 42.0,
                                                        -100.0, 42.0,
                                                        -104.0, 40.0]),
        extrudedHeight: 500000.0,
        material : Cesium.Color.GREEN,
    }
});

var polygon10 = viewer.entities.add({
    name : 'Green extruded polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-118.0, 42.0,
                                                        -110.0, 42.0,
                                                        -114.0, 40.0]),
        extrudedHeight: 500000.0,
        material : Cesium.Color.RED,
    }
});

window.setInterval(() => {
    polygon10._polygon.extrudedHeight += 300;
}, 10);

window.setInterval(() => {
    polygon100._polygon.extrudedHeight += 3000;
}, 100);

viewer.zoomTo(viewer.entities);

Context: In my application i have an extruded polygon, where you can change the height with drag and drop. When i just change the height on mouse move event, its the same problem as when i update with 100fps.

I use Cesium 1.39 with chrome on mac os x.

2

Hi,

Use the Scene.preUpdate event (or Scene.preRender if you are using <1.42) instead of setInterval. It will run every time the simulation time is updated.

scene.preUpdate.addEventListener(function(scene, time) {
// update code goes here
});

``

Thanks,

Gabby

3

Hey Gabby,

thank you very much for your answer. However, your solution doesnt seem to work:

var viewer = new Cesium.Viewer('cesiumContainer');

var polygon10 = viewer.entities.add({
    name : 'Green extruded polygon',
    polygon : {
        hierarchy : Cesium.Cartesian3.fromDegreesArray([-118.0, 42.0,
                                                        -110.0, 42.0,
                                                        -114.0, 40.0]),
        extrudedHeight: 500000.0,
        material : Cesium.Color.RED,
    }
});

viewer.scene.preUpdate.addEventListener(function(scene, time){
    polygon10._polygon.extrudedHeight += 300;
}, 10);

viewer.zoomTo(viewer.entities);

The polygon still doesnt get animated. (Sandbox)

4

Here’s a working example using a CallbackProperty: https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=cda0a1307fe0d5872f66027a9c2b2374

5

Thats a PogChamp, works great!

thanks you gabby <3

6

Hey I can’t access that link anymore but it is very relevant to my current project, is it hosted anywhere else?

7

@Gabby_Getz I would also like to see how you can do this.

8

In my case, I was struggling with flickering while swapping polygons representing data. While I can’t share the code I can tell you that setting viewer.scene.requestRenderMode = true and calling viewer.entities.suspendEvents() before my data manipulation for the swap, including viewer.entities.removeAll() and calling viewer.entities.resumeEvents() and viewer.scene.requestRender() after data handling fixed my problem, so if your issue is releated to flickering, maybe give that a try.

Let me know if it works.