You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {}
  • Firefox
  • Safari
  • undefined

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample shows how to set the time of day and manipulate shadows in a SceneView. These are part of the lighting settings, which can be found in the environment property of the SceneView:

view.environment = {
  lighting: {
    // enable shadows for all the objects in a scene
    directShadowsEnabled: true,
    // set the date and a time of the day for the current camera location
    date: new Date("Sun Mar 15 2019 16:00:00 GMT+0100 (CET)")

Shadows provide a much better understanding of the objects in the scene. They indicate where the sun light comes from and they help understand the shape of the 3D objects (along with the shading). If the objects are above the ground, shadows can help to better understand the position of the objects.

However, you may not want certain objects to cast shadows. In this sample, the zoning areas are abstract and we don't want them to cast shadows because they would make the buildings darker and more difficult to perceive.

It is possible to turn off the shadow per symbol layer. ObjectSymbol3DLayer, FillSymbol3DLayer, ExtrudeSymbol3DLayer, and PathSymbol3DLayer all have a castShadows property to control the shadows on individual 3D objects.

// disable shadows on the extruded polygon symbol
const symbol = {
  type: "polygon-3d",
  symbolLayers: [
      type: "extrude",
      castShadows: false,
      material: {
        color: [244, 247, 134]

Sample search results