3D Tiles styling and conditional expressions

Quick answer

This tutorial shows how Cesium3DTileStyle recolours and filters 3D Tiles features without re-exporting the model. It builds conditional colour arrays using feature attributes, color(), rgb() and Number() casts, applies show expressions to drop features, and sets pointSize for point clouds. It also covers runtime style replacement and reading attributes through Cesium3DTileFeature.getProperty. Readers can build thematic 3D city visualisations driven entirely by feature metadata.

Last verified 2026-11-03 · CesiumJS 1.121 · Cite this page

Key points

End every conditions array with a 'true' fallback so unmatched features still get a colour.
Cast string attributes with Number() before arithmetic, or the plus operator concatenates.
Use show instead of fully transparent colours so hidden features skip the render batch.

Example

var tileset = await Cesium.Cesium3DTileset.fromUrl('/tiles/buildings/tileset.json', {
  maximumScreenSpaceError: 16
});
viewer.scene.primitives.add(tileset);

tileset.style = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ['${height} >= 120', 'color("rgba(198, 40, 40, 0.9)")'],
      ['${height} >= 60',  'color("rgba(245, 124, 0, 0.9)")'],
      ['${height} >= 20',  'color("rgba(251, 192, 45, 0.9)")'],
      ['true',                'color("rgba(120, 144, 156, 0.75)")']
    ]
  },
  show: '${height} > 3',
  pointSize: '${isPOI} === true ? 12 : 6'
});

var heightStyle = new Cesium.Cesium3DTileStyle({
  color: {
    conditions: [
      ['Number(${floor}) >= 30', 'color("rgba(183, 28, 28, 1)")'],
      ['Number(${floor}) >= 20', 'color("rgba(230, 81, 0, 1)")'],
      ['Number(${floor}) >= 10', 'color("rgba(249, 168, 37, 1)")'],
      ['Number(${floor}) >= 1',  'color("rgba(124, 179, 66, 1)")'],
      ['true',                      'color("rgba(96, 125, 139, 0.6)")']
    ]
  },
  show: '${function} === "residential" || ${function} === "office"'
});

tileset.style = heightStyle;

Notes

Attribute names must match the batch table exactly, including case and underscores.
Setting feature.color overrides the style until it is reset to Cesium.Color.WHITE.

Runnable examples Chinese original All Tutorials

English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.

Cite this page

Atlaslog (2026). 3D Tiles styling and conditional expressions. https://www.jingweizhi.com/en/cesium/tutorials/tileset-style.html (accessed 2026-11-03).