By default, a Scene has a realistic sky with atmosphere, stars, and a black color in the background to simulate the space. This works great in Scene with realistic visualizations like textured buildings, integrated mesh layers or point clouds with RGB symbology.

Thematic visualizations go well with abstract representations of the world, so most of the time a background color can be considered more suitable compared to a realistic sky. At other times you want to integrate the globe with your web page, so you need a transparent background. This sample shows you how to do that.

1. Replace the sky with a custom color

The background property in Scene.environment can be used for setting a custom color. The atmosphere covers the background color at high zoom levels and in local webscenes, so it’s important to disable it. Here is the code snippet for this:

const viewElement = document.querySelector("arcgis-scene");
viewElement.environment = {
  background: {
    type: "color",
    color: [255, 252, 244, 1],
  },
  // Disable stars and atmosphere for a simpler background in this sample
  starsEnabled: false,
  atmosphereEnabled: false,
};

// Use virtual lighting mode for consistent illumination in this sampe
viewElement.environment.lighting = {
  type: "virtual",
};

2. Make the sky transparent

To make the sky transparent you first need to set the alpha in the background color to 0. Then enable transparency on the view by setting the Scene.alphaCompositingEnabled property to true. This property can be set to the component. When alpha compositing is enabled, web scenes might be less performant. It’s important to set this property to true only when you need to apply transparency on the view.

const viewElement = document.querySelector("arcgis-scene");
viewElement.environment = {
  background: {
    type: "color",
    // set the color alpha to 0 for full transparency
    color: [255, 252, 244, 0],
  },
  // Disable stars and atmosphere for a simpler background in this sample
  starsEnabled: false,
  atmosphereEnabled: false,
};

3. Bonus: change the ground color

Sometimes you don’t really need a basemap. By default when the basemap is disabled, a grid is displayed as the ground surface. Now you can change the ground to be displayed with a single color, using the Ground.surfaceColor property:

const viewElement = document.querySelector("arcgis-scene");
viewElement.basemap = null;
viewElement.ground = {
  surfaceColor: [226, 240, 255],
};