I am trying to visualize a CityGML file into Cesium. I am able to do so both into sandcastle and into a story displaying the corresponding asset. However, when I try to use the Cesium viewer embedded into a html file, nothing is shown. This, however, occurs only for certain assets’ ids, while others are correctly displayed.
Here is my html code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Esempio base Cesium</title>
<style>
html, body, #cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
function loadCesium(callback) {
var script = document.createElement('script');
script.src = 'https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js';
script.onload = function() {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css';
document.head.appendChild(link);
callback();
};
document.body.appendChild(script);
}
loadCesium(async function() {
// La tua chiave di accesso Cesium Ion qui
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhYjBlMWE4MS1lNWM1LTQzMjUtYTg0Ny1iOTBjMDlmMTQ1ZWUiLCJpZCI6MTgyNTkxLCJpYXQiOjE3MDE3NjkzMjZ9.6bCO4a_2zELu_jI-tzYrC6vWesZ3Ukfzu05zT8OSbnA';
// Crea il Cesium Viewer
const viewer = new Cesium.Viewer('cesiumContainer', {
requestRenderMode: true,
terrainProvider: Cesium.createWorldTerrain()
});
try {
const resource = await Cesium.IonResource.fromAssetId(2459318);
console.log("Resource URL:", resource._url); // Debugging the resource URL
const tileset = new Cesium.Cesium3DTileset({ url: resource });
tileset.readyPromise.then(function(tileset) {
// Manually set the camera to the tileset bounding sphere if available
const boundingSphere = tileset.boundingSphere;
if (boundingSphere) {
viewer.camera.flyToBoundingSphere(boundingSphere, {
duration: 3 // Seconds
});
} else {
console.error('Bounding sphere is undefined');
}
const extras = tileset.asset.extras;
if (Cesium.defined(extras) && Cesium.defined(extras.ion)) {
if (Cesium.defined(extras.ion.defaultStyle)) {
tileset.style = new Cesium.Cesium3DTileStyle(extras.ion.defaultStyle);
} else {
console.warn('No default style found in tileset, applying custom default style');
// Define a custom default style
tileset.style = new Cesium.Cesium3DTileStyle({
color: "color('white', 1.0)",
show: true
});
}
} else {
console.error('No ion extras found in tileset');
}
viewer.scene.primitives.add(tileset);
}).catch(function(error) {
console.error('Error during tileset loading:', error);
});
// Log any errors
tileset.allTilesLoaded.addEventListener(function() {
console.log('All tiles loaded');
viewer.scene.requestRender();
});
} catch (error) {
console.error("Error loading tileset:", error);
}
});
</script>
</body>
</html>
Can anyone help me fix this issue?