This sample demonstrates how to use the Daylight component to control the lighting conditions in a Scene component.
Use dark colors for code blocks Copy
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:
Use dark colors for code blocks Copy
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:
Use dark colors for code blocks Copy
1
viewElement.environment.lighting.directShadowsEnabled = false;The time slider in the Daylight component reacts to the camera changes (e.g. position, rotation, pan, zoom) because the position of the simulated sun is automatically updated to maintain a consistent solar time of the day at the camera's current longitude. See cameraTrackingEnabled for more details.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4