Daylight component

This sample demonstrates how to use the Daylight component to control the lighting conditions in a Scene component.

1
2
3
4
<arcgis-scene basemap="satellite" ground="world-elevation">
  <!-- include the Daylight component inside the Scene component -->
  <arcgis-daylight position="top-right" play-speed-multiplier="2"> </arcgis-daylight>
</arcgis-scene>

With the play button next to the slider, one can animate through the time of the day:

The speed of the animation can be configured with the play-speed-multiplier attribute when the component is initialized (as shown in the code snippet above) or using the playSpeedMultiplier property later in the app's script.

The component can be configured further to display a season picker instead of the date picker using the date-or-season attribute or dateOrSeason property.

Using properties like hideDatePicker, hidePlayButtons, or hideTimezone, one can hide specific UI elements.

The Daylight component controls the lighting properties of the environment. By default, the scene is illuminated based on a configuration of date and time (Date set in environment.lighting.date), and the sun as the light source is positioned accordingly. By unchecking the "Sun position by date and time" box, the scene becomes lit by a virtual light source relative to the camera. This mode is helpful, for example, when working with data on a global scale and in high latitudes of polar regions.

Alternatively, the lighting type can be set programmatically, and the component UI would update accordingly:

1
2
3
4
5
6
7
8
const viewElement = document.querySelector("arcgis-scene");
// Wait for the view to initialize
await viewElement.viewOnReady();
viewElement.environment.lighting = {
  type: "sun", // autocasts as new SunLighting()
  date: new Date(), // sets the lighting to reflect the current time of day
  directShadowsEnabled: true,
};

The Shadows checkbox turns the shadows on or off. The shadows are only displayed for real-world 3D objects, but the terrain does not cast shadows. Programmatically, the shadows can be set with:

1
viewElement.environment.lighting.directShadowsEnabled = false;