Help Styling 3D tiles

CesiumJS
1

Greetings!

I am not clear on how you make the jump from creation/viewing of the 3D tiles to the styling. The sandcastle example has a lot going on, and I really just want to do something simple like colorize the building based on a height property.

I have successfully added one of the demo data sets into my viewer using:

var viewer = new Cesium.Viewer('cesiumContainer');
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url : '/path/to/3d/tileset'
}));

And I see the instructions for styling like this:

{
    "show" : "\{Area\} &gt; 0&quot;, &nbsp;&nbsp;&nbsp;&nbsp;&quot;color&quot; : \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;conditions&quot; : \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{Height} < 60" : "color('#13293D')",
            "${Height} < 120" : "color('#1B98E0')",
            "true" : "color('#E8F1F2', 0.5)"
        }
    }
}

But how do I connect these two things together?

Thanks,
-- Stephanie

2

Hi Stephanie,

You should be able to set the style by waiting for the tileset to be ready and then setting tileset.style to a new Cesium3DTileStyle.

return Cesium.when(tileset.readyPromise).then(function(tileset) {
    tileset.style = new Cesium.Cesium3DTileStyle({
        "show" : "\{Area\} &gt; 0&quot;, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;color&quot; : \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;conditions&quot; : \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&quot;{Height} < 60" : "color('#13293D')",
                "${Height} < 120" : "color('#1B98E0')",
                "true" : "color('#E8F1F2', 0.5)"
            }
        }
    });
});

Thanks,
Gabby