final.html

<html lang="en">

<head>
    <meta charset="utf-8">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.94/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://3dps.gis.lrg.tum.de/viewerCesiumNavigationMixin.min.js"> </script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer" style="width: 100%; height:100%"></div>
    <script>
        // input data
        const data3D_tilesetURL = 'https://web3d.basemap.de/cesium/buildings-fly/root.json';
        const terrainURL = 'https://web3d.basemap.de/cesium/dgm5-mesh';
        const data2D_arcgisURL = 'https://tiles.arcgis.com/tiles/1lplwYilIlo008hQ/arcgis/rest/services/HighFloodRisk_ExportFeatures/MapServer';
        var basemapProvider = new Cesium.ArcGisMapServerImageryProvider({
             url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            // url : 'https://services.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer'
            // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Dark_Gray_Base/MapServer'
            // url: 'https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer'
            // url : 'https://services.arcgisonline.com/arcgis/rest/services/Specialty/DeLorme_World_Base_Map/MapServer'

        })
        var osmProvider = new Cesium.OpenStreetMapImageryProvider({
            url: 'https://a.tile.openstreetmap.org/'
        });
        var viewer = new Cesium.Viewer('cesiumContainer', {
            baseLayerPicker: false,
            baseLayer: false,
            vrButton: false,
            geocoder: false,
            navigationHelpButton: false,
            selectionIndicator: false,
            shadows: false,
            timeline: true,
            sceneModePicker: false,
            imageryProvider: basemapProvider
        });

        if (terrainURL) {
            viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
                url: terrainURL
            });
        }
        // Component 2: 3D Tileset
        var tileset;
        if (data3D_tilesetURL) {
            tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: data3D_tilesetURL
            }));
            // === Settting the style of the 3D Tileset ===
            var cityStyle = new Cesium.Cesium3DTileStyle({
                color: {
                    conditions: [
                        ["${surface} === 'wall'", "color('#f2f2f2')"],
                        ["${surface} === 'roof'", "color('#ff5c4d')"],
                        ["${surface} === 'bridge'", "color('#999999')"]
                    ]
                },
            });
            tileset.style = cityStyle
        }
        if (data2D_arcgisURL) {
            viewer.imageryLayers.addImageryProvider(new Cesium.ArcGisMapServerImageryProvider({
                url: data2D_arcgisURL
            }));
        }
        // === Settting the initial view of the 3D Viewer ===
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(9.6473353, 47.5728539, 3500.0),
            orientation: {
                heading: Cesium.Math.toRadians(0.0),
                pitch: Cesium.Math.toRadians(-40.0),
                roll: 0.0
            }
        });

        // === Adding the navigation controls ===
        viewer.extend(Cesium.viewerCesiumNavigationMixin, {});
    </script>
</body>

</html>