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

// 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();
	});
};

//////////////////////////// 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),
		})
	);

	//////// 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
	});
}
/////////////////////////////////////////////////////////////////////
// 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
});

////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////
// 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 () {
	tileset.show = tileset.show ? false : true;
}