How to make Cesium background be transparent

CesiumJS
1

I have created 2 CesiumViewer on my pages because I want another 3d overviewmap like Google Earth, and i have configued my CesiumJS like the following codes, to make 3d overviewmap’s background be transparent. but which cannot works

Google Earth, which i want to imitate
Google Earth, which i want to imitate1920×1117 361 KB

My earth ,i want ro remove the black background
My earth ,i want ro remove the black background1920×1440 157 KB

      overviewViewer.scene.highDynamicRange = false
      overviewViewer.scene.globe.enableLighting = false
      overviewViewer.scene.globe.showWaterEffect = false
      overviewViewer.scene.globe.depthTestAgainstTerrain = false
      overviewViewer.scene.skyAtmosphere.show = false
      overviewViewer.scene.fog.enabled = false
      overviewViewer.scene.skyBox.show = false
      overviewViewer.scene.sun.show = false
      overviewViewer.scene.moon.show = false
      overviewViewer.scene.highDynamicRange = false
      overviewViewer.scene.globe.showGroundAtmosphere = false
     //Set the background of the scene to transparent
     overviewViewer.scene.backgroundColor = Cesium.Color.TRANSPARENT
     //HDR needs to be disable for transparent backgrounds
     overviewViewer.scene.highDynamicRange = false

what should i do to remove the black background
Thanks, Levi

2

Hi @wjt123125, welcome to the community!

There are two additional things you need to set for the overview map:

  1. Enable alpha blending in the context. You can turn this on in the Viewer constructor options via the contextOptions.webgl object.
  2. Disable the skyBox which renders the stars behind the globe.
const viewer = new Cesium.Viewer("cesiumContainer");
const inset = new Cesium.Viewer("insetCesiumContainer", {
  // ...
  skyBox: false,
  contextOptions: {
    webgl: {
      alpha: true,
    },
  },
});
inset.scene.backgroundColor = Cesium.Color.TRANSPARENT;

Here’s my Sandcastle example showing an overview map in the corner with a transparent background.

image
image889×587 64.4 KB

(Note: I didn’t link the cameras in this example, so the overview doesn’t track the main Viewer position.)

3

Here’s an example of synced camera views to complete the mini-map functionality. :slight_smile:

4

Thanks for your reply. It is indeed feasible after practice.
Wish you have a nice day！