arcgis-scene-environment

ArcGIS Scene Environment

Use this skill for configuring SceneView environment: lighting, weather, shadows, atmosphere, backgrounds, underground navigation, and elevation settings.

Import Patterns

ESM (npm)

import Environment from "@arcgis/core/views/3d/environment/Environment.js";
import SunLighting from "@arcgis/core/views/3d/environment/SunLighting.js";
import VirtualLighting from "@arcgis/core/views/3d/environment/VirtualLighting.js";
import SunnyWeather from "@arcgis/core/views/3d/environment/SunnyWeather.js";
import CloudyWeather from "@arcgis/core/views/3d/environment/CloudyWeather.js";
import RainyWeather from "@arcgis/core/views/3d/environment/RainyWeather.js";
import FoggyWeather from "@arcgis/core/views/3d/environment/FoggyWeather.js";
import SnowyWeather from "@arcgis/core/views/3d/environment/SnowyWeather.js";
import ShadowCastAnalysis from "@arcgis/core/analysis/ShadowCastAnalysis.js";

CDN (dynamic import)

const SunLighting = await $arcgis.import(
  "@arcgis/core/views/3d/environment/SunLighting.js",
);
const RainyWeather = await $arcgis.import(
  "@arcgis/core/views/3d/environment/RainyWeather.js",
);
const ShadowCastAnalysis = await $arcgis.import(
  "@arcgis/core/analysis/ShadowCastAnalysis.js",
);

Environment Settings

Basic Environment Configuration

const view = new SceneView({
  container: "viewDiv",
  map: scene,
  environment: {
    lighting: {
      date: new Date("Sun Mar 15 2019 16:00:00 GMT+0100"),
    },
    atmosphereEnabled: true,
    starsEnabled: true,
  },
});

Map Component Environment

<arcgis-scene item-id="YOUR_WEBSCENE_ID">
  <arcgis-zoom slot="top-left"></arcgis-zoom>
</arcgis-scene>

<script type="module">
  const viewElement = document.querySelector("arcgis-scene");
  await viewElement.viewOnReady();

  viewElement.environment = {
    lighting: {
      date: new Date(),
    },
    atmosphereEnabled: true,
    starsEnabled: true,
  };
</script>