Porting from 1.100 to 1.120 to load Google 3d tileset

CesiumJS
1

I have this basic page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.100/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <title>PhotoCalc-CesiumJs astrophotography planner</title>
</head>

<body style="background-color:#AAAAAA; color:white">
<div id="cesiumContainer" style="width: 1000px;"></center>
<script src="mytoken.js"></script>

<script>
    Cesium.Ion.defaultAccessToken = mytoken;
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrainProvider: Cesium.createWorldTerrain(),
            navigationHelpButton: false, // Disabilita il pulsante di aiuto alla navigazione
            fullscreenButton: false,     // Disabilita il pulsante per la modalitĂ  schermo intero
            geocoder: false,             // Disabilita il geocoder
            homeButton: false,            // Disabilita il pulsante di ritorno alla vista iniziale
			sceneModePicker : false

    });
console.log(Cesium);

    viewer.scene.globe.enableLighting = true;
    viewer.scene.primitives.add(Cesium.createOsmBuildings()); // createGooglePhotorealistic3DTileset()

</script>


</body>
</html>

I would like to switch to 1.120 to use createGooglePhotorealistic3DTileset instead of createOsmBuildings, but how?

I don’t want my users to download and install anything on their machine apart from the html file.

2

From quickly looking over the code it’s not entirely clear (for me) what the question is.

But two pointers/hints:

  • The Google Photorealistic 3D Tiles Sandcastle shows how to create the tileset in general
  • For both the Cesium OSM Buildings and the Google Photorealistic 3D Tiles, the code will need an await. Instead of
    viewer.scene.primitives.add(
  Cesium.createGooglePhotorealistic3DTileset());
    you’ll have to do
    const tileset = await Cesium.createGooglePhotorealistic3DTileset();
viewer.scene.primitives.add(tileset);

(I’m a bit surprised that you used
viewer.scene.primitives.add(Cesium.createOsmBuildings());
because that should not have worked in 1.100 either…)

3

I tried that, but I get nonsens errors:

Not allowed to load local resource: blob:null/32d730a2-08f8-4a71-ac51-b9de6b653872
cesiumjs-test-004.html:1 

Not allowed to load local resource: blob:null/f3f70524-5b9d-43f8-9611-ecb2e676dc4b

Local? Why local?!?

4

I have no idea :slight_smile: You might have to describe your setup in more detail. Maybe this is going through some sort of “deployment” (webpack or whatnot) that messes something up.

But some additional notes:

  • You probably don’t want to assign a terrainProvider. The Google Photorealistic 3D Tiles should contain everything you need
  • Did you update from ...releases/1.100 to ...releases/1.120 in the head of your HTML?
  • Just to rule out this as the cause for the error: Try removing that
    <script src="mytoken.js"></script>
    and (only for the first tests!) setting the token directly, as in
    Cesium.Ion.defaultAccessToken = "... your token ...";
  • When you want to use await in the <script>, then you have to define that script as
    <script type="module">
5

My “setup” is just that html file: as I said, my users shall not download and install anything but an html file. It was possible with previous Cesium releases. :frowning:

mytoken.js just contains mytoken = ‘xxxxxxxxxxx’

6

And it still is (or should be).

I just put this HTML file (with my access token as the defaultAccessToken) into a directory…

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.120/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <title>PhotoCalc-CesiumJs astrophotography planner</title>
</head>

<body style="background-color:#AAAAAA; color:white">
<div id="cesiumContainer" style="width: 1000px;"></center>

<script type="module">
    Cesium.Ion.defaultAccessToken = "...";
    const worldTerrain = await Cesium.createWorldTerrainAsync();
    const viewer = new Cesium.Viewer('cesiumContainer', {
            terrainProvider: worldTerrain,
            navigationHelpButton: false, // Disabilita il pulsante di aiuto alla navigazione
            fullscreenButton: false,     // Disabilita il pulsante per la modalitďż˝ schermo intero
            geocoder: false,             // Disabilita il geocoder
            homeButton: false,            // Disabilita il pulsante di ritorno alla vista iniziale
			sceneModePicker : false

    });
console.log(Cesium);

    viewer.scene.globe.enableLighting = true;
    viewer.scene.primitives.add(await Cesium.createGooglePhotorealistic3DTileset());

</script>


</body>
</html>

and served this at localhost:

Cesium Forum HTML only
Cesium Forum HTML only1029×576 419 KB

Do you perform any forms of build- or post-processing steps on that HTML?

(Is it possible to look at the console or network tab in order to narrow down where these “Not allowed to load local resource” errors are coming from exactly? )

7

This implies asking my users to install a local server. They are users, not developers, I don’t want them to download anything and install anything (that’s the point of using JS, else I would use python or C++ compilers for my projects).

8

It doesn’t. This was intended for testing. I didn’t expect that you want to distribute your application by sending your users an HTML file via mail. But that’s also possible. You can just save that file in a directory and double-click it to open it with your browser, without hosting it. (There are some questions about the token, but that’s unrelated to that part).

9

…and we are back to the originale problem:

Uncaught TypeError: Cannot read properties of null (reading 'createElement')
    at HTMLIFrameElement.<anonymous> (Cesium.js:15896:3383)
cesium001.html:1 Refused to cross-origin redirects of the top-level worker script.
cesium001.html:1 Refused to cross-origin redirects of the top-level worker script.
cesium001.html:1 Refused to cross-origin redirects of the top-level worker script.
10

It seems to still have worked with 1.108. It seems to no longer work with 1.109. I have not yet identified the exact reason or a workaround. Maybe someone from the CesiumJS core team can chime in here.

1 Like
11

Hi @jumpjack, there are several reasons why some code cannot be run off the file system directly. What browser are you using?

Generally we do recommend that a site should be hosted somewhere for those reasons, though this does not have to be on a users’ local server.

12

I am using Chrome, which is known to have issues with local file system access. But if my Cesium page has no reason to access anything on my file system, why should it even try?!? Indeed previous releases of Cesium worked fine for years; this new “feature” is a major limitation)

13

Got it. Chrome especially prevents some features when running locally for security reasons.

But if my Cesium page has no reason to access anything on my file system, why should it even try?!?

That one HTML file is loaded off the file system when you or your users open it on their machines. CesiumJS then loads files other than a single JS file– like worker JS and CSS, and this is resulting in CORS errors.

For background, the previous behavior was likely changed with 1.109. The change we made was to make CesiumJS more modern and maintainable in the long run. However, I understand why it would be frustrating that this broke previous behavior for your use case.

We think the solution to this is to distribute a version which does not load any additional files, and instead inline all content into a single bundle. I’ll add a note there that this came up for this case.

In the meantime, I still would highly recommend looking into some way to serve the file. That is fairly standard web development practice at this point in time, and is still lighter weight than C++ compilers.

Thanks,
Gabby