Visualization with CesiumJS

CesiumJS

CesiumJS is a JavaScript library which helps you display the generated model in the web browser. The library has to be included into the HTML code of your website. You can use the hosted version from Cesium or download the JavaScript library and work with it locally on your computer. https://cesium.com/cesiumjs/

Sample code

In this sample the CesiumJS library is integrated as an online resource via a script tag. This sample code is also available on the official Cesium website alongside with a few tutorials:

https://cesium.com/docs/tutorials/getting-started/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.70/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <style>
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
        url : 'url/to/your/tileset/tileset.json',
        }));
    viewer.zoomTo(tileset); 
  </script>
</body>
</html>

Replace the url property with the path to your own tileset.json file from the FME conversion. The tileset.json file and the data folder must be hosted on a server (e.g. Apacheon XAMPP), otherwise there can be CORS errors.

Hint: Use the Developer Tools included in your browser (in Firefox press F12) to check for errors.

Styling

Cesium has its own styling language which is used to display the 3D model features in different colors or excluding them altogether from rendering in the current view:

https://github.com/CesiumGS/3d-tiles/tree/master/specification/Styling

Sample code

You can add this code to set the style attribute for the tileset.

tileset.style = new Cesium.Cesium3DTileStyle({
            "color":"color('green')"   
        });

Or you can tie the visualization to attribute values, like a specific ID. gml_parent_id is used in this case:

tileset.style = new Cesium.Cesium3DTileStyle({
    "color":{
        "conditions": [ 
            ["${gml_parent_id}==='DENW43AL00002dlN'","rgb(212,235,80 )"],
	    ["${gml_parent_id}==='DENW43AL00002dlV'","rgb(107,174,155 )"],
	    ["${gml_parent_id}==='DENW43AL00002dlW'","rgb(87,199,16 )"],
            ["true","color('green')"]
        ]
    }    
});