Cesium quick start texture issue

General
1

Hello,

I’m trying the Cesium quick start import from CDN but when I copy and paste, and open the index.html, I see the ground as black.

image
image1433×781 114 KB

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.117/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    // Your access token can be found at: https://ion.cesium.com/tokens.
    // This is the default access token from your ion account

    Cesium.Ion.defaultAccessToken = 'your_access_token';

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });    

    // Fly the camera to San Francisco at the given longitude, latitude, and height.
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
      orientation: {
        heading: Cesium.Math.toRadians(0.0),
        pitch: Cesium.Math.toRadians(-15.0),
      }
    });

    // Add Cesium OSM Buildings, a global 3D buildings layer.
    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);   
  </script>
 </div>
</body>
</html>
2

https://cdnjs.cloudflare.com/ajax/libs/cesium/1.108.0/Cesium.js works, and I’m able to view the textures.

Looks like version 1.125.0 is the latest, but when I add that to my script src, the textures are dark again. Any idea why?

(https://cdnjs.com/libraries/cesium)

This is what I have working,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Flight Tracker</title>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.108.0/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.109/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer"></div>
  <script type="module">
    Cesium.Ion.defaultAccessToken = 'your access token';
    const viewer = new Cesium.Viewer('cesiumContainer', {
      terrain: Cesium.Terrain.fromWorldTerrain(),
    });    
    
    viewer.camera.flyTo({
      destination: Cesium.Cartesian3.fromDegrees(-0.113,51.159,274),
      orientation: {
        heading: Cesium.Math.toRadians(258),
        pitch: Cesium.Math.toRadians(0),
      }
    });

    const buildingTileset = await Cesium.createOsmBuildingsAsync();
    viewer.scene.primitives.add(buildingTileset);   
  </script>
 </div>
</body>
</html>
4

I tried all cesium.js from 1.108.0 to 1.125.0. Only 1.108.0 works. Any idea?

<script src="https://cdnjs.cloudflare.com/ajax/libs/cesium/1.108.0/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.125/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
5

Just as a pointer: I think that this is related to Uncaught TypeError: Failed to execute 'importScripts' on 'WorkerGlobalScope': Module scripts don't support importScripts() · Issue #11505 · CesiumGS/cesium · GitHub , or more generally, a change in how certain scripts have been packaged between version 1.108 and 1.109, buf if this is the reason, I’m not sure what’s the best way to resolve this.

6

Thanks. Is this something I’m doing wrong?

7

I don’t think so. The tutorial is pretty clear in this regard - at least, from my understanding (and how I also reproduced the issue!), it should be possible to simply copy-and-paste that snippet and open it. But then… there’s the browser security mechanisms kicking in, refusing to load/execute the scripts (you can see an error message in the console, when you press ‘F11’ in the browser window).

8

Little check: replaced the access token?

9

@bertt That should not be necessary. The code that is shown on that page will actually insert your Cesium ion access token there (when you are currently “logged in” to Cesium ion).

(BTW: I raised some concerns about that internally, and think that it should be made clearer in the code snippet…)