# Help Styling 3D tiles

**URL:** <https://community.cesium.com/t/help-styling-3d-tiles/3987>\
**Category:** CesiumJS\
**Created:** [April 13, 2016, 11:57am UTC](https://community.cesium.com/t/help-styling-3d-tiles/3987 "2016-04-13T11:57:38Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![scdockstad](https://avatars.discourse-cdn.com/v4/letter/s/43a26b/32.png) [@scdockstad](https://community.cesium.com/u/scdockstad)\
**Post date:** [April 13, 2016, 11:57am UTC](https://community.cesium.com/t/help-styling-3d-tiles/3987/1 "2016-04-13T11:57:38Z")

</div>

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({  
&nbsp;&nbsp;&nbsp;&nbsp;url : '/path/to/3d/tileset'  
}));

And I see the instructions for styling like this:

{  
&nbsp;&nbsp;&nbsp;&nbsp;"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')",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"${Height} \< 120" : "color('#1B98E0')",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"true" : "color('#E8F1F2', 0.5)"  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}

But how do I connect these two things together?

Thanks,  
-- Stephanie

---

<div class="post-metadata">

**Author:** ![Gabby\_Getz](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/gabby_getz/32/7838_2.png) [@Gabby\_Getz](https://community.cesium.com/u/Gabby_Getz)\
**Post date:** [April 13, 2016, 2:31pm UTC](https://community.cesium.com/t/help-styling-3d-tiles/3987/2 "2016-04-13T14:31:52Z")

</div>

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) {  
&nbsp;&nbsp;&nbsp;&nbsp;tileset.style = new Cesium.Cesium3DTileStyle({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"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')",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"${Height} \< 120" : "color('#1B98E0')",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"true" : "color('#E8F1F2', 0.5)"  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;});  
});

Thanks,  
Gabby