Cesium Rendering & Zoom-to Crash Issue -- 2
Budget: €8 – €30 EUR
I'm currently using Cesium version 1.116 and encountering some frustrating issues. My tilesets and 3D objects are not rendering the way they should and the viewer.zoomTo command crashes the renderer. These problems occur despite not using any custom shaders or materials in my project.
The specific error message I get is: "Rendering has stopped. TypeError: this._root is undefined," and I can't figure out why. This is where you come in.
I need a seasoned developer well-versed in JavaScript who is also very experienced with Cesium. The ideal person for this job:
- Has strong diagnostic and problem-solving skills, with prior experience working on similar rendering issues.
- Is familiar with Cesium (ideally version 1.116) and its rendering capabilities.
- Can help zero in on the root cause of the error and guide me through the steps to fix it.
If this sounds like you and you're up to the challenge, I'd love to hear from you. Here's to making my Cesium project run smoothly!
'''
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Newcesiumtest</title>
<script src="/RS/Build/Cesium/Cesium.js"></script>
<style>
@import url(/RS/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
#measuretoolbar {
position: absolute;
top : 50%;
right: 30px;
display: inline;
margin: 10px;
padding: 0px;
background: #394148;
}
</style>
</head>
<body>
<style>@import url(/RS/Apps/Sandcastle/templates/bucket.css);</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
<script>
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDhmZDlhYy0zOWIwLTQ5N2EtODEyYy00ODY1MzFkYzQwODUiLCJpZCI6MTg0MDMsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzM3NTU0OTN9.vQn17q1cp77RAXXIjxv-IbfOkaiA2mP-QF8lmHo0XFk";
const viewer = new Cesium.Viewer("cesiumContainer", {
});
viewer.scene.setTerrain(
new Cesium.Terrain(
Cesium.CesiumTerrainProvider.fromIonAssetId(1),
),
);
viewer.scene.globe.depthTestAgainstTerrain = true;
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(2521713),
skipLevelOfDetail : false,
maximumScreenSpaceError:1,
maximumNumberOfLoadedTiles :2000
})
);
(async () => {
try {
await ametistaTileset.readyPromise;
await viewer.zoomTo(ametistaTileset);
}});
</script>
</body>
</html>
'''
You can drop this inside here:
https://sandcastle.cesium.com
and test it html / script
The specific error message I get is: "Rendering has stopped. TypeError: this._root is undefined," and I can't figure out why. This is where you come in.
I need a seasoned developer well-versed in JavaScript who is also very experienced with Cesium. The ideal person for this job:
- Has strong diagnostic and problem-solving skills, with prior experience working on similar rendering issues.
- Is familiar with Cesium (ideally version 1.116) and its rendering capabilities.
- Can help zero in on the root cause of the error and guide me through the steps to fix it.
If this sounds like you and you're up to the challenge, I'd love to hear from you. Here's to making my Cesium project run smoothly!
'''
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Newcesiumtest</title>
<script src="/RS/Build/Cesium/Cesium.js"></script>
<style>
@import url(/RS/Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
#measuretoolbar {
position: absolute;
top : 50%;
right: 30px;
display: inline;
margin: 10px;
padding: 0px;
background: #394148;
}
</style>
</head>
<body>
<style>@import url(/RS/Apps/Sandcastle/templates/bucket.css);</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay">
<h1>Loading...</h1>
</div>
<div id="toolbar"></div>
<script>
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDhmZDlhYy0zOWIwLTQ5N2EtODEyYy00ODY1MzFkYzQwODUiLCJpZCI6MTg0MDMsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NzM3NTU0OTN9.vQn17q1cp77RAXXIjxv-IbfOkaiA2mP-QF8lmHo0XFk";
const viewer = new Cesium.Viewer("cesiumContainer", {
});
viewer.scene.setTerrain(
new Cesium.Terrain(
Cesium.CesiumTerrainProvider.fromIonAssetId(1),
),
);
viewer.scene.globe.depthTestAgainstTerrain = true;
const tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(2521713),
skipLevelOfDetail : false,
maximumScreenSpaceError:1,
maximumNumberOfLoadedTiles :2000
})
);
(async () => {
try {
await ametistaTileset.readyPromise;
await viewer.zoomTo(ametistaTileset);
}});
</script>
</body>
</html>
'''
You can drop this inside here:
https://sandcastle.cesium.com
and test it html / script