App.js

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNWFjZDJiMy1hYzk3LTQ2YWUtYWVjYi01MDk1OGVlZGI0NTgiLCJpZCI6MTEwNzEsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NTgwMjE1Mjh9.lF6TGAJrX3qMGBt5egdAA7SJYNnaYX17mhURwGg_Kbg';

    //////////////////////////////////////////////////////////////////////////
    // Creating the Viewer
    //////////////////////////////////////////////////////////////////////////

     var viewer = new Cesium.Viewer('cesiumContainer', {
         scene3DOnly: true,
         selectionIndicator: false,
		 timeline: false,
		 animation: false,
		 shadow: false,
		 // // Set default basemap
            imageryProvider : Cesium.ArcGisMapServerImageryProvider({url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'}),
		 baseLayerPicker: true
		 
     });
     viewer.clock.shouldAnimate = false;
	 viewer.scene.globe.enableLighting = false;
     viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
     viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:20:00Z");
     viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2019-09-20T16:00:00Z");
	 document.getElementById("irradianceLegend").style.display = "none"; //defining legends hidden by default
		 
    //////////////////////////////////////////////////////////////////////////
    // Configuring the camera
    //////////////////////////////////////////////////////////////////////////
    // // Create an initial camera view
     var initialPosition = Cesium.Cartesian3.fromDegrees(9.197574, 48.788913, 900);
    var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(360, -45, 360);
     var homeCameraView = {
         destination : initialPosition,
         orientation : {
            heading : initialOrientation.heading,
            pitch : initialOrientation.pitch,
            roll : initialOrientation.roll
         }
      };
    // // Set the initial view
     viewer.scene.camera.setView(homeCameraView);
		// set home button to initial view 
	 
	 viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
        e.cancel = true;
         viewer.scene.camera.flyTo(homeCameraView);
     }); 
	 viewer.camera.changed.addEventListener(function() {

  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.heading))
  console.log('Heading:', deg)

  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.pitch))
  console.log('Pitch:', deg)
  
  var deg = Math.round( Cesium.Math.toDegrees(viewer.camera.roll))
  console.log('Roll:', deg)
});
    //////////////////////////////////////////////////////////////////////////
    // Load 3D Tileset
    //////////////////////////////////////////////////////////////////////////

    var rosensteinviertelBldgSld = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Bldg/tileset.json'}));
	//viewer.zoomTo(rosensteinviertelBldgSld);
	
	var rosensteinviertelBldgSrf = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: './Source/Data/Srf/tileset.json'}));
	rosensteinviertelBldgSld.show = true;
	rosensteinviertelBldgSrf.show = false;
    //////////////////////////////////////////////////////////////////////////
    // Style 3D Tileset
    //////////////////////////////////////////////////////////////////////////
	
	var defaultstyle = new Cesium.Cesium3DTileStyle({
        color : "color('WHITE')",
			show: true
     });

 
    var irradiancestyle = new Cesium.Cesium3DTileStyle({
         color : {
            conditions : [
					["(${Irr_kWh} > 0)  && (${Irr_kWh} < 200)", "color('#6495ED')"],
					["(${Irr_kWh} >= 200)  && (${Irr_kWh} < 450)", "color('#9370DB')"],
                    ["(${Irr_kWh} >= 450) && (${Irr_kWh} < 700)", "color('#8B0000')"],
                    ["(${Irr_kWh} >= 700) && (${Irr_kWh} < 950)", "color('#D2691E')"],
                    ["(${Irr_kWh} >= 950) && (${Irr_kWh} < 1250)", "color('#FFEBCD')"],
					["(${Irr_kWh} >= 1250)", "color('#EC1414')"],
					["true", "color('#000000')"]
             ]
         },
		 show: true
     });
	 
	 
	 var colorstyle1 = document.getElementById('3dbuildings');	 
	 var colorstyle2 = document.getElementById('irradiance');
	 
     function set3DColorStyle() {
        if (colorstyle1.checked) {
			rosensteinviertelBldgSld.show = true;
			rosensteinviertelBldgSrf.show = false;
            rosensteinviertelBldgSld.style = defaultstyle;
			 document.getElementById("irradianceLegend").style.display = "none";
			 
			  } 
		else if (colorstyle2.checked) {
			rosensteinviertelBldgSld.show = false;
			rosensteinviertelBldgSrf.show = true;
             rosensteinviertelBldgSrf.style = irradiancestyle;
			 document.getElementById("irradianceLegend").style.display = "block";
			 
		      }
	
        }
	 
	 colorstyle1.addEventListener('change', set3DColorStyle);
     colorstyle2.addEventListener('change', set3DColorStyle);
	 

    //////////////////////////////////////////////////////////////////////////
    // Custom mouse interaction for highlighting and selecting
    //////////////////////////////////////////////////////////////////////////
//Style the overlay
var nameOverlay = document.createElement('div');
viewer.container.appendChild(nameOverlay);
nameOverlay.className = 'backdrop';
nameOverlay.style.display = 'none';
nameOverlay.style.position = 'absolute';
nameOverlay.style.bottom = '0';
nameOverlay.style.left = '0';
nameOverlay.style['pointer-events'] = 'none';
nameOverlay.style.padding = '4px';
nameOverlay.style.backgroundColor = 'black';
nameOverlay.style.fontFamily = 'Fira Sans, sans-serif';

//Selecting a Building
var Pickers_3DTile_Activated = true;
// Information about the currently highlighted feature
function active3DTilePicker() {
    var highlighted = {
        feature: undefined,
        originalColor: new Cesium.Color()
    };
    // Information about the currently selected feature
    var selected = {
        feature: undefined,
        originalColor: new Cesium.Color()
    };

    // An entity object which will hold info about the currently selected feature for infobox display
    var selectedEntity = new Cesium.Entity();

    // Get default left click handler for when a feature is not picked on left click
    var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // Color a feature yellow on hover.
    viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
        if (Pickers_3DTile_Activated) {
            // If a feature was previously highlighted, undo the highlight
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            // Pick a new feature
            var picked3DtileFeature = viewer.scene.pick(movement.endPosition);
            if (!Cesium.defined(picked3DtileFeature)) {
                nameOverlay.style.display = 'none';
                return;
            }
            // A feature was picked, so show it's overlay content
            nameOverlay.style.display = 'block';
            nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
            nameOverlay.style.left = movement.endPosition.x + 'px';
            var name = picked3DtileFeature.getProperty('Type');

            if (!Cesium.defined(name)) {
                name = picked3DtileFeature.getProperty('Type');
            }
            nameOverlay.textContent = name;
            // Highlight the feature if it's not already selected.
            if (picked3DtileFeature !== selected.feature) {
                highlighted.feature = picked3DtileFeature;
                Cesium.Color.clone(picked3DtileFeature.color, highlighted.originalColor);
                picked3DtileFeature.color = Cesium.Color.GREY;
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

    // Color a feature on selection and show metadata in the InfoBox.
    viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {

        if (Pickers_3DTile_Activated) {
            // If a feature was previously selected, undo the highlight
            if (Cesium.defined(selected.feature)) {
                selected.feature.color = selected.originalColor;
                selected.feature = undefined;
                var options = null;
            }
            // Pick a new feature
            var picked3DtileFeature = viewer.scene.pick(movement.position);
            if (!Cesium.defined(picked3DtileFeature)) {
                clickHandler(movement);
                return;
            }
            // Select the feature if it's not already selected
            if (selected.feature === picked3DtileFeature) {
                return;
            }
            selected.feature = picked3DtileFeature;
            // Save the selected feature's original color
            if (picked3DtileFeature === highlighted.feature) {
                Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
                highlighted.feature = undefined;
            } else {
                Cesium.Color.clone(picked3DtileFeature.color, selected.originalColor);
            }
            // Highlight newly selected feature
            picked3DtileFeature.color = Cesium.Color.AQUA;
            // Set feature infobox description
            var featureName = "Building Information";
            selectedEntity.name = featureName;
            selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
			if (picked3DtileFeature.getProperty('Feature') === "Surface") {
            viewer.selectedEntity = selectedEntity;
            selectedEntity.description =
                '<table class="cesium-infoBox-defaultTable"><tbody>' +
                '<tr><th>Surface ID</th><td>' + picked3DtileFeature.getProperty('PolygonID') + '</td></tr>' +
				'<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('bldgID') + '</td></tr>' +
				'<tr><th>Surface Area (m²)</th><td>' + picked3DtileFeature.getProperty('Area') + '</td></tr>' +
		        '<tr><th>Irradiance (kWh/(m².a))</th><td>' + picked3DtileFeature.getProperty('Irr_kWh') + '</td></tr>' +
               	'</tbody></table>';

 
                                
        }
		
		else 
			{
            viewer.selectedEntity = selectedEntity;
            selectedEntity.description =
                '<table class="cesium-infoBox-defaultTable"><tbody>' +
                '<tr><th>Building ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
				'<tr><th>Building Parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
				'<tr><th>Height (m)</th><td>' + picked3DtileFeature.getProperty('citygml_measured_height') + '</td></tr>' +
			   	'</tbody></table>';

 
                                
        }
		}
			
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

active3DTilePicker();