Cesium Polygon Update
HTML
<script src="https://cesiumjs.org/Cesium/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Build/Cesium/Widgets/widgets.css">
<div id="cesiumContainer"></div>
CSS
html, #cesiumContainer {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
JavaScript
var viewer = new Cesium.Viewer('cesiumContainer');
var ellipsoid = Cesium.Ellipsoid.WGS84;
var getPositions = function (clock) {
var delta = clock / 10;
return Cesium.Cartesian3.fromDegreesArrayHeights([-0 + delta, 53 + delta, 100000, -8 + delta, 50 + delta, 100000, -4 + delta, 54 + delta, 0]);
};
var polygon = viewer.scene.primitives.add(new Cesium.Polygon({
positions: getPositions(0),
ellipsoid: ellipsoid,
height: 20000,
asynchronous: false,
extrudedHeight: 10000
}));
var entity = viewer.entities.add({
id: 123,
polygon: {
hierarchy: getPositions(-20),
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK
}
});
var updatePrimitive = function (clock) {
if (window.primitive !== undefined) {
viewer.scene.primitives.remove(window.primitive);
}
window.primitive = viewer.scene.primitives.add(new Cesium.Primitive({
geometryInstances: new Cesium.GeometryInstance({
geometry: new Cesium.PolygonGeometry({
polygonHierarchy: {
positions: getPositions(clock)
},
extrudedHeight: 0,
height: 0,
perPositionHeight: true
})
}),
asynchronous: false,
allowPicking: false,
appearance: new Cesium.MaterialAppearance({
translucent: true
})
}));
};
var clock = 0;
window.setInterval(function () {
polygon.positions = getPositions(clock++);
updatePrimitive(clock - 10);
entity.polygon.hierarchy = getPositions(clock - 20);
}, 500);