Set realistic environment settings in a SceneView

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

This sample demonstrates how to alter the environment settings of a SceneView to create a realistic scene for different times of day. The lighting in the sample depicts the current time of day in Brest, France. This will change depending on the time of day you view the sample. Note the clock and time displayed in the sample reflect the local time of the user, not the local time in Brest.

Rotate the clock's handles several times around the clock and observe how the sky changes its appearances based on the local time of Brest. When the nighttime hours arrive, stars will display in their proper locations in relation to the earth. As you continue to move the clock's hands so the daytime hours arrive, you will notice the sky appear as if it were day. The sun will also be positioned in its actual location. Properties of the sun's position relative to the earth such as time of day, the current season and day of the year are all taken into account.

To set a SceneView's environment settings, use the environment property of the view. The lighting of a scene is determined by the Date set in view.envrionment.lighting.date.

view.environment = {
  lighting: {
    date: new Date(),  // sets the lighting to reflect the current time of day
    directShadowsEnabled: true,  // enables shadows
    cameraTrackingEnabled: false
  },
  atmosphere: {
    quality: "high"  // creates a more realistic atmosphere
  }
};