Google Photorealistic 3D Tiles in CesiumJS

CesiumJS
1

Hello, I am new to Cesium and building web applications, so this question may seem trivial to some of you. I have set up the basic CesiumJS following the TUTORIAL.md. Now, I am attempting to integrate Google Photorealistic 3D Tiles into CesiumJS, but after starting, I encounter this issue, that the globe is empty:

1
11920×1023 119 KB

I would like to know what changes I need to make to make it work.

Here is my index.js file structure (I have replaced sensitive information with placeholders):

import { Viewer, Ion, GoogleMaps } from "cesium";
import "cesium/Build/Cesium/Widgets/widgets.css";
import "../src/css/main.css";
Ion.defaultAccessToken = "...";
GoogleMaps.defaultApiKey = "...";
const viewer = new Viewer("cesiumContainer", {
  timeline: false,
  animation: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  globe: false,
});
viewer.scene.skyAtmosphere.show = true;
try {
  const tileset = await Cesium.createGooglePhotorealistic3DTileset();
  viewer.scene.primitives.add(tileset);
} catch (error) {
  console.log(`Error loading Photorealistic 3D Tiles tileset: ${error}`);
}
viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    -2693797.551060477,
    -4297135.517094725,
    3854700.7470414364
  ),
  orientation: new Cesium.HeadingPitchRoll(
    4.6550106925119925,
    -0.2863894863138836,
    1.3561760425773173e-7
  ),
});
2

For issues like this, the first step is usually to look at the browser ‘Console’ (e.g. hitting F12 in Chrome or Firefox), and see whether there is any error message.

Depending on what error message it is, someone may be able to provide more guidance.

(My guess is that it will be something like 401 or 403 errors and there might be something wrong with the token, but make sure to NOT post any tokens or other sensitive information when you post the error message here)

3

Thanks for the reply. When looking into the console it shows me two errors:

    TypeError: a.default.detectStore(...) is undefined

    Uncaught (in promise) ReferenceError: Cesium is not defined
    <anonymous> webpack://cesium/./src/index.js?:34
    a http://localhost:8080/app.js:12217
    <anonymous> webpack://cesium/./src/index.js?:1
    js http://localhost:8080/app.js:609
    __webpack_require__ http://localhost:8080/app.js:12144
    <anonymous> http://localhost:8080/app.js:13422
    <anonymous> http://localhost:8080/app.js:13424
4

That’s strange.

To confirm:

(I’ll probably not be able to provide specific help here, but some of these details about the approach and setup will be relevant for those who hopefully will chime in here with help (or just more specific questions…))

5

Thanks for the clarification and follow up questions. Yes I followed the tutorial at Cesium JS: Photorealistic 3D Tiles from Google Maps Platform – Cesium to my best abillities but not the Quickstart Tutorial and instead followed cesium-webpack-example/TUTORIAL.md on GitHub because for me it was kind of hard to understand “using a module bundler such as Webpack, Parcel, or Rollup”, but not how to use them. The tutorial gave me specific instructions to what my setup now is. Is there some kind of compatibility or other issue with webpack or this setup?

6

It’s hard to make guesses what went wrong there at which point. When you try out one of the projects in the linked tutorial (e.g. webpack-4 or webpack-5), do they work for you? Or did you manually go through each step and build your application that way? (The basic setup should be independent of the Google tiles, so the first step would be to get that basic version running).