Exercise 3 3D - Add a Scene Layer

Instructions:

Just displaying a plain scene is fine, but we need to be able to add our own layers to our scene.

In this exercise we will cover the basics of adding a scene layer to any 3D application. To learn more about the options in SceneLayers check out the API Reference.

Exercise:

1. Update Require Statement
First step is to update the require statement and the function definition.

require([
  "esri/Map",
  "esri/views/SceneView",
  "esri/layers/SceneLayer"
], function(Map, SceneView, SceneLayer) {

This is a pattern that we are going to repeating a lot throughout these exercises. Now we have the components for our Scene Layer.

2. Add Scene Layer
Now let's add the a scene layer to our map, buildings always look nice in 3D!

var buildingsSL = new SceneLayer({
  url: "https://tiles.arcgis.com/tiles/hRUr1F8lE8Jq2uJo/arcgis/rest/services/BuildingsDC/SceneServer/layers/0"
});
map.add(buildingsSL);

Nice! You should be able to zoom in and check out the buildings now. Should look like this:

Map Solution

3. Adjust Camera
In these scenes, it might be beneficial to adjust your camera in the code to have a better starting point. Let's adjust the camera settings in our SceneView.

var view = new SceneView({
  container: "viewDiv",
  map: map,
  camera:{
    position: [-77.029, 38.89, 300],
    tilt: 40,
    heading: 60
  }
});

Now your camera should be perfectly positioned over the Smithsonian Museum of Natural History!

Code Solution


Challenges:

Add your own SceneLayer! Use whatever portal you are comfortable with, and find a scene layer published up on there. Keep in mind it must be shared publically, otherwise it'll ask you to log into the portal.


Final Solution