Cesium Tileset is Colorless

CesiumJS
1

I have a set of tilesets in the form of i3dm files. I have a for loop in my _Cesium.js file that goes through each tileset and creates a Cesium3DTileset object from its files. We then apply attributes to that tileset, including colors of each tile depending on certain values (precipitation and lightning, in this case). However, only the first tileset in the for loop succesfully loads with color. The 2nd, 3nd, 4th, etc. tilesets remain the default white. Here are screenshots of the issue:

Colored_Current
Colored_Current692×389 97.5 KB

Colorless_Prediction
Colorless_Prediction692×389 254 KB

What could be causing the issue? For each tileset, we add it to the tilesetCollection and add styles to it.

2

Bit hard to guess, I think you need to show some code, especially where you create those tilesets in a loop. White usually means no style has been applied, it could be that you’re setting styles to a referenced object instead of a cloned or new style object?

Cheers,

Alex

3

Hey Alex, thank you for responding. Here is the snippet of code that we use to iterate through each tileset dataset and add styles to each one:
for (var i = 0; i <= 36; i++) {

    // URL
    const tilesetURL = '../assets/data/tileset/tileset_' + i.toString().padStart(2, '0') + '/tileset.json';

    try {

        // Check if tileset exists.
        var checkRequest = new XMLHttpRequest();
        checkRequest.open('HEAD', tilesetURL, false);
        checkRequest.send();
        if (checkRequest.status === 404 || i === 36) {
            viewer.clock.onTick.addEventListener(function (clock) {
                updateHRRRTilesetForTime(clock.currentTime);
            });
            viewer.scene.primitives.add(tilesetCollection);
           return;
        }
    }
    catch (err) {
        console.log(err);
    }

    // Load tileset.
    const tileset = new Cesium.Cesium3DTileset({
        url: tilesetURL,
        // Show only current tileset.
        show: i === 0,
        preloadFlightDestinations: true
    });

    // Add to global tileset array.
    tileset.readyPromise.then(function () {

        tilesetMetadata.push({
            "tileset": tileset,
            "time": Cesium.JulianDate.fromIso8601(tileset.asset.tilesetVersion)
        });

        // Add tileset to collection.
        tilesetCollection.add(tileset);
        // Apply style to tileset.
        tileset.style = new Cesium.Cesium3DTileStyle({
            "color" : {
                "conditions" : [
                    ["${LIGHT} >= 4", "color('purple', 0.5)"],
                    ["(${PRATE} > 0) && (${PRATE} < 0.15)", "color('green', 0.5)"],
                    ["(${PRATE} >= 0.15) && (${PRATE} < 0.5)", "color('darkgreen', 0.5)"],
                    ["(${PRATE} >= 0.5)", "color('yellow', 0.5)"],
                    ["true", "color('gray', 0.5)"]
                ]
            }
        });
    });
}

}

I appreciate any insight you can provide. I’m fairly new to CesiumJS, so I’m wondering if its some kind of rendering rule or reaction that I’m not informed about.