updated the 3d building model using the 3dtiles set from steinbeis, delivered via geovolume api

public/HFT.html

@@ -51,18 +51,11 @@
       @import url(templates/bucket.css);
     </style>
 
-<!-- <header class="backdrop">
-  <h3> <img src="imgs/INSPIRER.svg"  style="height:12%;width:8%;"> HFT Pointclouds Bld 1 & 3</h1>  
-</header> -->
+
 
     <div id="cesiumContainer" class="">   </div>
     <script src="HFT.js"></script>
-      <!-- <div id="toolbar">      
-    </div> -->
-<!--     
-    <h2  class="" onclick="open3DCMO()" style="cursor:pointer; color:rgb(155, 0, 0)">
-      <strong><i class="fas fa-copy"></i> Menu</strong>
-  </h2> -->
+
   <div class="backdrop mainbackdrop" id="DCMO" style="display:show">    
     <h2>  Layer selection </h2>
     <table>
@@ -95,12 +88,7 @@
       </table>     
 </div>
             
-    
-    <!-- <div id="loadingOverlay">
-      <h1>Loading...</h1>
-    </div> -->
-
-   
+      
     
     <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

public/HFT.js

@@ -44,19 +44,57 @@ var zoomAll = function (tileset) {
 
 //////////////////////////// load 3d building tiles or OSM 3d Buildings ///////////////////////
 // here is the switch to switch between different 3d buildings 
-const LOAD_3DTILES = true;
 
-if (LOAD_3DTILES) {
+
 	// load 3d Tile set of SToeckach.
-	var tileset = viewer.scene.primitives.add(
-		new Cesium.Cesium3DTileset({
-			url: Cesium.IonResource.fromAssetId(656401),
+	// var tileset = viewer.scene.primitives.add(
+	// 	new Cesium.Cesium3DTileset({
+	// 		url: "https://steinbeis-3dps.eu/3DGeoVolumes/collections/Stuttgart/HFTBuildings_3DModel_noTexture/3dtiles/tileset.json"//Cesium.IonResource.fromAssetId(656401),
+	// 	})
+	// );
+
+	var load3DTiles = function () {
+		tilesetLOD1 = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+			url: "https://steinbeis-3dps.eu/3DGeoVolumes/collections/Stuttgart/HFTBuildings_3DModel_noTexture/3dtiles/tileset.json" //Cesium.IonResource.fromAssetId(656401),
+		}));
+	
+		// 
+	
+		Cesium.when(tilesetLOD1.readyPromise).then(function (tilesetLOD1) {
+			viewer.flyTo(tilesetLOD1)
+			tilesetLOD1.style = new Cesium.Cesium3DTileStyle({
+				color: {
+					conditions: [
+						["${featureType} === 'Window'", "color('blue')"],
+						["${featureType} === 'WallSurface'", "color('gray')"],
+						["${featureType} === 'RoofSurface'", "color('red')"],
+						["${featureType} === 'OuterFloorSurface'", "color('white')"],
+						["true", "color('white')"],
+					],
+				},
+				show: true
+			});
+			// tilesetLOD1.style = new Cesium.Cesium3DTileStyle({
+			//     color: "color('BLACK', 0.3)",
+			//     show: true
+			// });
+	
+			var heightOffset = 50.0;
+			var boundingSphere = tilesetLOD1.boundingSphere;
+			var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
+			var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+			var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
+			var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
+			tilesetLOD1.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
 		})
-	);
+	
+	}
+	load3DTiles()
 
 	//////// important value. to find the correct value trail and error is needed for a perfect fit
 	const BUILDIG_TILESET_HEIGHT_OFFSET = 54;
-
+	var tileset = tilesetLOD1
+	
 	tileset.readyPromise.then(function (tileset) {
 		var height = BUILDIG_TILESET_HEIGHT_OFFSET;
 		var cartographic = Cesium.Cartographic.fromCartesian(
@@ -82,40 +120,8 @@ if (LOAD_3DTILES) {
 
 		//return zoomAll(tileset); // zoom or rather go to the translated tileset
 	});
-}
-/////////////////////////////////////////////////////////////////////
-// Alternatively, instead of using the Stoeckach LOD1 Building 3d Tiles,
-//  use OSM Buildings from Cesium ION assets - in this case set LOAD_3DTILES variable in Line 41 to 'false'
-////////////////////////////////////////////////////////
-else {
-	var osmBuildings = Cesium.createOsmBuildings();
-	osmBuildings.readyPromise
-		.then(function (osmBuildings) {
-			viewer.scene.primitives.add(osmBuildings);
-		})
-		.otherwise(function (error) {
-			console.log(error);
-		});
-
-	// now zoom to target and set camera view angle to some oblique angle: use '-Cesium.Math.PI_OVER_TWO' to look down nadir.
-	// if you use '+Cesium.Math.PI_OVER_TWO', you look into space.
-	viewer.camera.setView({
-		destination: Cesium.Cartesian3.fromDegrees(
-			9.172183958234173,
-			48.78029680030391,
-			20000
-		),
-		orientation: {
-			heading: 0.0,
-			pitch: -Cesium.Math.PI_OVER_TWO, // set an oblique viewing angle
-			roll: 0.0,
-		},
-	});
-}
 
-tileset.style = new Cesium.Cesium3DTileStyle({
-	show: true
-});
+
 
 ////////////////////////////////////////////////////////////////////////////////////
 ////////////////////////////////////////////////////////////////////////////////////