Animating an Ellipsoid over Time

CesiumJS
1

What am I missing?

Trying to get an ellipsoid to change over time. The below code has ‘what I think’ is data to scale an ellipsoid over time. It just doesn’t do anything. Can I manipulate an entity AFTER its created? Am I missing another property somewhere?

// Sandcastle example to animate covariance ellipsoids over time

// Create Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', 
    {
        canAnimate: true, 
        shouldAnimate: true
    }
);

// Define covariance ellipsoid data for different time intervals
const ellipsoidData = [
    { time: '2024-04-23T00:00:00.000000000Z', position: [-7000000.0, -7000000.0, 2000000.0], radii: [2000000.0, 3000000.0, 4000000.0] },
    { time: '2024-04-23T06:00:00.000000000Z', position: [-7010000.0, -7020000.0, 2040000.0], radii: [ 100000.0,  200000.0,  300000.0] },
    { time: '2024-04-23T12:00:00.000000000Z', position: [-7020000.0, -7040000.0, 2080000.0], radii: [  50000.0,   10000.0,   15000.0] },
    { time: '2024-04-23T18:00:00.000000000Z', position: [-7030000.0, -7060000.0, 2160000.0], radii: [ 100000.0,  200000.0,  300000.0] },
    { time: '2024-04-24T00:00:00.000000000Z', position: [-7040000.0, -7080000.0, 2320000.0], radii: [4000000.0, 5000000.0, 6000000.0] }
];

// Set up the clock and animation
const clock = viewer.clock;
clock.startTime = Cesium.JulianDate.fromIso8601(ellipsoidData[0].time);
clock.stopTime = Cesium.JulianDate.fromIso8601(ellipsoidData[ellipsoidData.length - 1].time);
clock.currentTime = clock.startTime;
clock.clockRange = Cesium.ClockRange.LOOP_STOP;
clock.multiplier = 1000; // Adjust the speed of animation if necessary
clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER;

// Create entity a initial time interval
viewer.entities.add({
    id: 'cv1',
    name: 'cv1',
    position: Cesium.Cartesian3.fromArray(ellipsoidData[0].position),
    label: {
        font: '15px sans-serif',
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        show: true,
    },
    point: {
        pixelSize: 10,
        color: Cesium.Color.BLUE.withAlpha(0.75),
    },
    ellipsoid: {
        radii: Cesium.Cartesian3.fromArray(ellipsoidData[0].radii),
        material: Cesium.Color.RED.withAlpha(0.25),
        outlineColor: Cesium.Color.SLATEGRAY.withAlpha(0.5),
        outline: true,
    },
    description: 
        "<h3>Id: " + 'cv1' + " @ " + ellipsoidData[0].time + "</h4>" +
        "<h4>Name: '" + 'cv1' + "'</h3>" +
        "<p>" + Cesium.Cartesian3.fromArray(ellipsoidData[0].position) + "m position.</p>" +
        "<p>" + Cesium.Cartesian3.fromArray(ellipsoidData[0].radii) + "m covariance.</p>"
});

// Animate the changes
viewer.clock.onTick.addEventListener(function(clock) {
    const time = clock.currentTime;

    // Find the appropriate interval
    var index = 0;
    for (var i = 0; i < ellipsoidData.length - 1; i++) {
        const time0 = Cesium.JulianDate.fromIso8601(ellipsoidData[i + 1].time);
        if (Cesium.JulianDate.compare(time0, time) > 0) { index = i; break; }
    }

    // Interpolate between the data points
    const previousData = ellipsoidData[index];
    const nextData = ellipsoidData[index + 1];
    if (!nextData) { return; /* No next data point */ }
    //console.log('index: ' + index + ', next: ' + previousData.time + ', next: ' + nextData.time + 'time: ' + time);

    const interpolationFactor = 
        Cesium.JulianDate.secondsDifference(
            time,                                         
            Cesium.JulianDate.fromIso8601(previousData.time)) /
        Cesium.JulianDate.secondsDifference(
            Cesium.JulianDate.fromIso8601(nextData.time), 
            Cesium.JulianDate.fromIso8601(previousData.time));
    //console.log('index: ' + index + ', if: ' + interpolationFactor);
  
    // Update entity properties based on interpolation
    const pos = Cesium.Cartesian3.lerp(
        Cesium.Cartesian3.fromArray(previousData.position), 
        Cesium.Cartesian3.fromArray(nextData.position), 
        interpolationFactor, new Cesium.Cartesian3());
    const cv = Cesium.Cartesian3.lerp(
        Cesium.Cartesian3.fromArray(previousData.radii), 
        Cesium.Cartesian3.fromArray(nextData.radii), 
        interpolationFactor, new Cesium.Cartesian3());
    //viewer.entities.getById('cv1').position = pos; // Uncommenting this...nothing draws
    viewer.entities.getById('cv1').radii = cv; // Changes to this do nothing
    //console.log(pos + ':' + cv); // Outputs the correct changing data...
    //console.log(cv); // Simpler output; just the radii
    //viewer.scene.requestRender();
});
2

Here is a condensed version to keep the URL smaller. I added a checkbox in the upper left that toggles the constant flag for the callback. when the run starts, the ellipse is animating…toggle the check box, all stops including the clock. Toggling back on starts the clock, render the ellipse but not moving. Toggling repeatedly, when the ellipse does render it displays a size change, but nothing moved. Am I missing a flag, is this the wrong approach? Am I chasing something I will never catch?

Anyone have any ideas? I am need to tell me client, this is not a capability.

3

Workable…seems like a way using callbacks.