Blank globe from template code

CesiumJS
1

Hi everyone,

Just starting off with CesiumJS. I adapted some of the beginner code from the Google Cloud website to try and get a sense of how everything works, but all I see is the outline of Earth and the Moon… Any help would be greatly appreciated.

image
image2538×1228 141 KB

Pasted below is my code (removed API key for security):

// Import the required Cesium modules
import { Cesium3DTileset, Viewer } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { useEffect } from "react";


// Create the Cesium Viewer inside your component
function CesiumViewer() {
  useEffect(() => {

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Viewer('cesiumContainer', {
      imageryProvider: false,
      baseLayerPicker: false,
      geocoder: false,
      globe: false,

      // https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode
      requestRenderMode: true,

      //timeline: false,
    });

    viewer.scene.skyAtmosphere.show = true;

    // Add Photorealistic 3D Tiles
    const tileset = viewer.scene.primitives.add(new Cesium3DTileset({
      url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=",
      // This property is needed to appropriately display attributions
      // as required.
      showCreditsOnScreen: true,
    }));
  }, []);

  return (
    <div id="cesiumContainer" style={{ width: '100%', height: '100vh' }}></div>
  );
}

export default CesiumViewer;
2

The reason is that there are no image layers in the scene, you need to add a default imageryProvider.

  const viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    }),
  })

or after instantiating the viewer:

  var layer = viewer.imageryLayers.addImageryProvider(
    new Cesium.ArcGisMapServerImageryProvider({
      url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
    })
  )

There are many types of image layers, you can refer to the API: ImageryProvider.

3

Thanks for the advice, but unfortunately I am still getting the same problem. Here’s my code now:

// Import the required Cesium modules
import { Cesium3DTileset, Viewer, ArcGisMapServerImageryProvider } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { useEffect } from "react";


// Create the Cesium Viewer inside your component
function CesiumViewer() {
  useEffect(() => {

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Viewer('cesiumContainer', {
      imageryProvider: new ArcGisMapServerImageryProvider({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
      }),
      baseLayerPicker: false,
      geocoder: false,
      globe: false,

      // https://cesium.com/blog/2018/01/24/cesium-scene-rendering-performance/#enabling-request-render-mode
      requestRenderMode: true,

      //timeline: false,
    });

    viewer.scene.skyAtmosphere.show = true;

    // Add Photorealistic 3D Tiles
    const tileset = viewer.scene.primitives.add(new Cesium3DTileset({
      url: "https://tile.googleapis.com/v1/3dtiles/root.json?key=",
      // This property is needed to appropriately display attributions
      // as required.
      showCreditsOnScreen: true,
    }));
  }, []);

  return (
    <div id="cesiumContainer" style={{ width: '100%', height: '100vh' }}></div>
  );
}

export default CesiumViewer;

And this is what I get still:

image
image2556×1235 153 KB

4

I didn’t look too carefully just now. In this example code, the Earth is hidden ( globe: false ), so everything on Earth cannot be displayed.

In addition, the request render mode is enabled in the code (requestRenderMode: true), and you must manually call the render method to render the scene, I suggest you don’t need to know about it for a while.

viewer.scene.requestRender();

Also, if you don’t know much about the API, I recommend giving the parameters default values in most cases.

const viewer = new Viewer('cesiumContainer', {
  imageryProvider: new ArcGisMapServerImageryProvider({
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
  }),
});
5

Hi there,

The Google Cloud example is a bit out of date.

Here’s a working example.

6

Thank you!

This might be a really silly question, but where should I add my access token? Here is my following code:

// Import the required Cesium modules
import { Cartesian3, Viewer, HeadingPitchRoll, createGooglePhotorealistic3DTileset, IonWorldImageryStyle, IonImageryProvider, Ion } from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import { useEffect } from "react";


// Create the Cesium Viewer inside your component
function CesiumViewer() {
  useEffect(async () => {

    Ion.defaultAccessToken = [KEY];

    const viewer = new Viewer("cesiumContainer", {
      timeline: false,
      animation: false,
      sceneModePicker: false,
      baseLayerPicker: false,
      // The globe does not need to be displayed,
      // since the Photorealistic 3D Tiles include terrain
      globe: false,
    });
    
    // Enable rendering the sky
    viewer.scene.skyAtmosphere.show = true;
    
    // Add Photorealistic 3D Tiles
    try {
      const tileset = await createGooglePhotorealistic3DTileset();
      viewer.scene.primitives.add(tileset);
    } catch (error) {
      console.log(`Error loading Photorealistic 3D Tiles tileset.
      ${error}`);
    }
    
    // Point the camera at the Googleplex
    viewer.scene.camera.setView({
      destination: new Cartesian3(
        -2693797.551060477,
        -4297135.517094725,
        3854700.7470414364
      ),
      orientation: new HeadingPitchRoll(
        4.6550106925119925,
        -0.2863894863138836,
        1.3561760425773173e-7
      ),
    }); 
  }, []);

  return (
    <div id="cesiumContainer" style={{ width: '100%', height: '100vh' }}></div>
  );
}

export default CesiumViewer;

But on my localhost server none of the assets ever load:

image
image2553×1289 123 KB

Thanks for all the help!

7

Sure @nuggsbuggs87,

What version of CesiumJS are you using?

8

I am using 1.110.1

9

@Gabby_Getz Hi Gabby, I recently updated Cesium to 1.111.0 but I’m still getting the same problems… Any tips for a fix?

10

Hi @nuggsbuggs87,

Just to confirm, in the line of code below, you’ve replaced [KEY] with your Cesium ion access token generated from your account. Correct?

Ion.defaultAccessToken = [KEY];

If that’s the case, the above lines should be working.