App.js

     Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxYjBlYmYyNC1kNWRhLTRiNTUtOGNlYi02NGY1YWVhNjI2MjIiLCJpZCI6MTEwNzEsImlhdCI6MTYxOTcwNjI0M30.tlpaagcH93SjaHIn7eEVpanGSiH2yDylbGJZr2gsXnY';
	 
	 var lkrlud_terrain = new Cesium.CesiumTerrainProvider({
        url : 'https://w2.iaf.hft-stuttgart.de/LKRLudwigsburg/GSS2019/Apps/GSS/DATA/terrain_3x3/',
		});
	  
	 var flatterrain = new Cesium.EllipsoidTerrainProvider();
	    var terrainProviderViewModels = [];
      
      // Add ProviderViewModels to View Models
      // Own Terrain Provider
      terrainProviderViewModels.push(new Cesium.ProviderViewModel({
        name : 'Ludwigsburg DTM',
        iconUrl : Cesium.buildModuleUrl('https://w2.iaf.hft-stuttgart.de/LKRLudwigsburg/GSS2019/Source/Widgets/Images/TerrainProviders/CesiumWorldTerrain.png'),
        tooltip : 'Terrain of Ludwigsburg 5m x 5m',
        creationFunction : function() {
            return lkrlud_terrain;
        }
      }));
      
      // Cesium Terrain Provider
      terrainProviderViewModels.push(new Cesium.ProviderViewModel({
        name : 'Cesum World Terrain',
        iconUrl : Cesium.buildModuleUrl('https://w2.iaf.hft-stuttgart.de/LKRLudwigsburg/GSS2019/Source/Widgets/Images/TerrainProviders/CesiumWorldTerrain.png'),
        tooltip : 'Cesium World Terrain 30m x 30m',
        creationFunction : function() {
            return Cesium.createWorldTerrain();
        }
      }));
	  
	    // Cesium Terrain Provider
      terrainProviderViewModels.push(new Cesium.ProviderViewModel({
        name : 'Cesium WGS84',
        iconUrl : Cesium.buildModuleUrl('https://w2.iaf.hft-stuttgart.de/LKRLudwigsburg/GSS2019/Source/Widgets/Images/TerrainProviders/CesiumWorldTerrain.png'),
        tooltip : 'wgs 84',
        creationFunction : function() {
            return flatterrain;
			}
      }));
      
    //////////////////////////////////////////////////////////////////////////
    // 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_Imagery/MapServer'
							}),		     
		 baseLayerPicker: true,
	     terrainProviderViewModels : terrainProviderViewModels		 
     });
   
   
    //////////////////////////////////////////////////////////////////////////
    // Load 3D Tileset
    //////////////////////////////////////////////////////////////////////////

var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
	 //url: Cesium.IonResource.fromAssetId(481524)
 url: './Source/Data/3DTiles/tileset.json'
//url: 'https://w2.iaf.hft-stuttgart.de/3DTilesViewer/Source/Data/3DTiles/tileset.json'
 })
);
viewer.zoomTo(tileset);

	
	
	//////////////////////////////////////////////////////////////////////////
    // Selecting geometries in 3D Tileset
    //////////////////////////////////////////////////////////////////////////
	
	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
				
				// 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 = "3D Tiles Viewer";
				selectedEntity.name = featureName;
				selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';

				viewer.selectedEntity = selectedEntity;
				selectedEntity.description =
					'<table class="cesium-infoBox-defaultTable"><tbody>' +
					'<tr><th>gml ID</th><td>' + picked3DtileFeature.getProperty('gml_id') + '</td></tr>' +
					'<tr><th>gml parent ID</th><td>' + picked3DtileFeature.getProperty('gml_parent_id') + '</td></tr>' +
					'</tbody></table>';                                          
			}
		}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
	}
	active3DTilePicker();