Help Styling 3D tiles

[scdoc...@gmail.com]

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} > 0",
"color" : {
"conditions" : {
"${Height} < 60" : "color('#13293D')",
"${Height} < 120" : "color('#1B98E0')",
"true" : "color('#E8F1F2', 0.5)"
}
}
}

But how do I connect these two things together?

Thanks,
-- Stephanie

[gget...@gmail.com]

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} > 0",
"color" : {
"conditions" : {
"${Height} < 60" : "color('#13293D')",
"${Height} < 120" : "color('#1B98E0')",
"true" : "color('#E8F1F2', 0.5)"
}
}

});
});

Thanks,
Gabby