HFT.js

// specifiy credentials and assets from Cesium ION account
Cesium.Ion.defaultAccessToken =
	"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiYjY5ZTAxNy03YTc0LTQyZTYtYjJlMC0xYzYwNTAzNDQ0ZjUiLCJpZCI6MjkwNCwiaWF0IjoxNjM1NDEzOTI0fQ.Xhmt0sD4Dda4Q46FBYew4wPbqlJ4T8U9n1nNNwGyH7o";

// setting up Cesium Viewer
var viewer = new Cesium.Viewer("cesiumContainer", {
	imageryProvider: new Cesium.IonImageryProvider({ assetId: 3 }), //3 bing maps with labels // use Sentinel2 imagery as default assetID:3954
	/////////////////////////////////////////
	// Note the next 3 lines specify that the Cesium Terrain should be used. ION account is needed
	// For a 'flat' Earth the z-offsets below for each of the tilesets needs to be adjusted
	// comment the next 3 lines to remove the Cesium terrain (Resulution approx. 30m)
	/////////////////////////////////////////
	terrainProvider: new Cesium.CesiumTerrainProvider({
		url: Cesium.IonResource.fromAssetId(1),
	}),
});


// set home button extend
var extent = Cesium.Rectangle.fromDegrees(9.162794728779428, 48.78605872069245, 9.181827683763427, 48.77616123564855);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

viewer.scene.globe.enableLighting = true; // set lighting to true

// load 3d Tile set of HFT from Cesium ION.
var tileset = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(656401),
	})
);

// define a function to zoom to the tileset (invoke later)
var zoomAll = function (tileset) {
	return new Promise(function (resolve, reject) {
		if (!tileset) {
			reject("Tileset is undifined");
		}
		viewer.camera.viewBoundingSphere(
			tileset.boundingSphere,
			new Cesium.HeadingPitchRange(0, -0.5, 400)
		);
		viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
		resolve();
	});
};



	

	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;
	
	tileset.readyPromise.then(function (tileset) {
		var height = BUILDIG_TILESET_HEIGHT_OFFSET;
		var cartographic = Cesium.Cartographic.fromCartesian(
			tileset.boundingSphere.center
		);
		var surface = Cesium.Cartesian3.fromRadians(
			cartographic.longitude,
			cartographic.latitude,
			0.0
		);
		var offset = Cesium.Cartesian3.fromRadians(
			cartographic.longitude,
			cartographic.latitude,
			height
		);
		var translation = Cesium.Cartesian3.subtract(
			offset,
			surface,
			new Cesium.Cartesian3()
		);
		// now shift / translate the tileset by the translation vector defined above
		tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

		return zoomAll(tileset); // zoom or rather go to the translated tileset
	});

	tileset.show = false;


////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
// HFT PointCloud Tileset.
////////////////////////////////////////////////////////////////////////////////////

const PCOFFSET = 0;

var hftLargePC = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(655879),
	})
);

hftLargePC.readyPromise.then(function (hftLargePC) {
	var height = PCOFFSET;
	var cartographic = Cesium.Cartographic.fromCartesian(
		hftLargePC.boundingSphere.center
	);
	var surface = Cesium.Cartesian3.fromRadians(
		cartographic.longitude,
		cartographic.latitude,
		0.0
	);
	var offset = Cesium.Cartesian3.fromRadians(
		cartographic.longitude,
		cartographic.latitude,
		height
	);
	var translation = Cesium.Cartesian3.subtract(
		offset,
		surface,
		new Cesium.Cartesian3()
	);
	// now shift / translate the tileset by the translation vector defined above
	hftLargePC.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

	return zoomAll(hftLargePC); // zoom or rather go to the translated tileset
});

hftLargePC.style = new Cesium.Cesium3DTileStyle({
	color: "color('blue',0.3)",
	// color: "color('red')" ,
	pointSize: 3
});




///////////////////////////// innenhof PC

var hftInnehofRGB_PC = viewer.scene.primitives.add(
	new Cesium.Cesium3DTileset({
		url: Cesium.IonResource.fromAssetId(656854),
	})
);

hftInnehofRGB_PC.style = new Cesium.Cesium3DTileStyle({
	// color: "color('blue',0.3)",	
	// color: "color('red')" ,
	pointSize: 3
});



////////////////////////// Control Pointclouds and Tileset with switches

var toggleLargePC = function () {
	if (hftLargePC.show === true) {
		hftLargePC.show = false
	}
	else {
		hftLargePC.show = true
	}
}
// or use tenrary operator as for the other two 
var toggleRGBPC = function () {
	hftInnehofRGB_PC.show = hftInnehofRGB_PC.show ? false : true;
}

var toggleBuildingTiles = function () {
	if (tileset.show === true) {
		tileset.show = false
	}
	else {
		tileset.show = true	
		if (tilesetLOD1.show === true){
			$('#prettyBuildingsCheckbox').prop('checked', false);
			tilesetLOD1.show = false
		}						
	}
}

var togglePrettyBuildingTiles = function () {
	// tilesetLOD1.show = tilesetLOD1.show ? false : true;
	if (tilesetLOD1.show === true) {
		tilesetLOD1.show = false		
	}
	else {
		tilesetLOD1.show = true				
		if (tileset.show === true){
			$('#simpleBuildingsCheckbox').prop('checked', false);
			tileset.show = false
		}
	}
	// $('#prettyBuildingsCheckbox').prop('checked', true); // Checks it
//$('#myCheckbox').prop('checked', false); // Unchecks it
}