How can i get model loading event in cesium viewer

Question

In cesium I am adding 3dmodel as the follows(url is nothing but the path of .gltf file)

function load3dmodel(url, x, y) {
    viewer.entities.removeAll();
    viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(x, y), model: {
            uri: url
         }
    });
}

It is taking 30 to 60 sec to laod the gltf file in cesium viewer, so i want to display a processing Gif image while loading 3dmodel. to achieve this i am not able to find the 3dmodel loading event. I mean when actually the loading completed. I tried using "then" clause after the function gets end. bu it is not working

Answer 1

Currently, there's no official way to do this. The Entity API layer deliberately hides the graphics primitive layer below it, to prevent a leaky abstraction. A future version of Cesium should expose Model.ready and Model.readyPromise to Entity API, but currently that's not implemented.

I did take a minute to look what would be required to fish out the Model primitive in Cesium version 1.15. The code to find this is pretty ugly and it uses "private" (prefixed with _) variables which are undocumented and subject to change without warning. So this isn't a long-term solution, and may not work across versions.

function load3dmodel(url, x, y) {
    viewer.entities.removeAll();
    var entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(x, y), model: {
            uri: url
        }
    });

    // Use of _private variables is undocumented, subject to change without notice.
    // Do not use this code in production.
    Cesium.requestAnimationFrame(function() {
        viewer.dataSourceDisplay.defaultDataSource._visualizers.reduce(function(a,b) {
            return (a instanceof Cesium.ModelVisualizer) ? a : b; }
        )._modelHash[entity.id].modelPrimitive.readyPromise.then(function() {
            console.log('Your model has loaded.');
        });
    });
}