SceneView - shadow and lighting settings

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:

1
2
3
4
5
6
7
8
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.

1
2
3
4
5
6
7
8
9
10
11
12
13
// disable shadows on the extruded polygon symbol
const symbol = {
  type: "polygon-3d",
  symbolLayers: [
    {
      type: "extrude",
      castShadows: false,
      material: {
        color: [244, 247, 134]
      }
    }
  ]
};