Create a web scene (3D)

Learn how to use Scene Viewer to create a web scene for your application.

A web scene is a scene that you can create with the Scene Viewer, stored in the ArcGIS Platform, and then use in applications. The Scene Viewer allows you to interactively style and configure scenes by setting the basemap layer, elevation layers, data layers, as well as layer visibility ranges. All of the settings are stored as JSON in an item. A number of ArcGIS applications and APIs can access web scene items, read the JSON, and then re-create the original map.

In this tutorial, you use the Scene Viewer to create and save a web scene using hosted feature layers. You will also inspect the JSON that contains the web scene settings.

Prerequisites

You need an ArcGIS account to use the Scene Viewer to create and save web scenes. Sign up for an account for free.

Steps

Set the basemap layer

To create a web scene with the Scene Viewer, start by setting the basemap layer. Use the Streets vector tile basemap.

  1. Open the Scene Viewer and sign in to your developer account.

  2. Click New Scene.

  3. In the right panel, click the Basemap icon > Streets.

  4. Close the Basemap panel.

Add data layers

To display data in a web scene, add hosted feature layers for trailheads, trails, and parks in the Santa Monica Mountain area.

  1. In the left panel, click Add layers > Enter layer URL.

  2. For each URL:

    • Copy and paste the URL in Layer URL and give the layer a name in Layer name > Add.
      • Parks and Open Space: https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Parks_and_Open_Space/FeatureServer/0
      • Trails: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trails/FeatureServer/0
      • Trailheads: https://services3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Trailheads/FeatureServer/0
  3. Click Save Scene. At minimum, you need to provide a title and tags to save the scene > Save.

  4. In the toolbar, use the tools to pan and rotate the scene to drag the map until you can see the horizon.

Your web scene should look something like this.

View web scene JSON

A web scene item contains JSON that defines the scene properties. The structure of the web scene is defined by the Web Scene Specification. Applications can access a web scene item or read the JSON directly to format layers and create a scene, so it's useful to know how to get the JSON for a web scene.

  1. In your web browser, find the item ID at the end of the URL for the web scene you just saved.

    • For example: a82026c675804e95be448b300c70bc03.
  2. In a new browser tab, copy and paste the following URL and insert your item ID. This will return the JSON for your web scene.

  3. In the JSON, identify the operational (data) layers and the elevation layer. For example:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
    {
      "operationalLayers":[
         {
            "id":"164a5a3ade4-layer-2",
            "title":"Parks and Open Space",
            "url":"https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Parks_and_Open_Space/FeatureServer/0",
            "layerType":"ArcGISFeatureLayer",
            "popupInfo":{
               "showAttachments":true,
               "popupElements":[
                  {
                     "type":"fields"
                  },
                  {
                     "type":"attachments"
                  }
               ],
               "fieldInfos":[
                  {
                     "fieldName":"UNIT_ID",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"UNIT_ID",
                     "visible":true
                  },
                  {
                     "fieldName":"PARK_NAME",
                     "label":"PARK_NAME",
                     "visible":true
                  },
                  {
                     "fieldName":"PARK_LBL",
                     "label":"PARK_LBL",
                     "visible":true
                  },
                  {
                     "fieldName":"ACCESS_TYP",
                     "label":"ACCESS_TYP",
                     "visible":true
                  },
                  {
                     "fieldName":"RPT_ACRES",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"RPT_ACRES",
                     "visible":true
                  },
                  {
                     "fieldName":"GIS_ACRES",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"GIS_ACRES",
                     "visible":true
                  },
                  {
                     "fieldName":"AGNCY_NAME",
                     "label":"AGNCY_NAME",
                     "visible":true
                  },
                  {
                     "fieldName":"AGNCY_LEV",
                     "label":"AGNCY_LEV",
                     "visible":true
                  },
                  {
                     "fieldName":"AGNCY_TYP",
                     "label":"AGNCY_TYP",
                     "visible":true
                  },
                  {
                     "fieldName":"AGNCY_WEB",
                     "label":"AGNCY_WEB",
                     "visible":true
                  },
                  {
                     "fieldName":"MNG_AGENCY",
                     "label":"MNG_AGENCY",
                     "visible":true
                  },
                  {
                     "fieldName":"COGP_TYP",
                     "label":"COGP_TYP",
                     "visible":true
                  },
                  {
                     "fieldName":"NDS_AN_TYP",
                     "label":"NDS_AN_TYP",
                     "visible":true
                  },
                  {
                     "fieldName":"NEEDS_ANLZ",
                     "label":"NEEDS_ANLZ",
                     "visible":true
                  },
                  {
                     "fieldName":"TKIT_SUM",
                     "label":"TKIT_SUM",
                     "visible":true
                  },
                  {
                     "fieldName":"AMEN_RPT",
                     "label":"AMEN_RPT",
                     "visible":true
                  },
                  {
                     "fieldName":"PRKINF_CND",
                     "label":"PRKINF_CND",
                     "visible":true
                  },
                  {
                     "fieldName":"AM_OPNSP",
                     "label":"AM_OPNSP",
                     "visible":true
                  },
                  {
                     "fieldName":"AM_TRLS",
                     "label":"AM_TRLS",
                     "visible":true
                  },
                  {
                     "fieldName":"TRLS_MI",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"TRLS_MI",
                     "visible":true
                  },
                  {
                     "fieldName":"TENIS",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"TENIS",
                     "visible":true
                  },
                  {
                     "fieldName":"BSKTB",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"BSKTB",
                     "visible":true
                  },
                  {
                     "fieldName":"BASEB",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"BASEB",
                     "visible":true
                  },
                  {
                     "fieldName":"SOCCR",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"SOCCR",
                     "visible":true
                  },
                  {
                     "fieldName":"MPFLD",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"MPFLD",
                     "visible":true
                  },
                  {
                     "fieldName":"FITZN",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"FITZN",
                     "visible":true
                  },
                  {
                     "fieldName":"SK8PK",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"SK8PK",
                     "visible":true
                  },
                  {
                     "fieldName":"PCNIC",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"PCNIC",
                     "visible":true
                  },
                  {
                     "fieldName":"PLGND",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"PLGND",
                     "visible":true
                  },
                  {
                     "fieldName":"POOLS",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"POOLS",
                     "visible":true
                  },
                  {
                     "fieldName":"SPPAD",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"SPPAD",
                     "visible":true
                  },
                  {
                     "fieldName":"DGPRK",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"DGPRK",
                     "visible":true
                  },
                  {
                     "fieldName":"GYM",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"GYM",
                     "visible":true
                  },
                  {
                     "fieldName":"COMCT",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"COMCT",
                     "visible":true
                  },
                  {
                     "fieldName":"SNRCT",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"SNRCT",
                     "visible":true
                  },
                  {
                     "fieldName":"RSTRM",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"RSTRM",
                     "visible":true
                  },
                  {
                     "fieldName":"TOTAL_GOOD",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"TOTAL_GOOD",
                     "visible":true
                  },
                  {
                     "fieldName":"TOTAL_FAIR",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"TOTAL_FAIR",
                     "visible":true
                  },
                  {
                     "fieldName":"TOTAL_POOR",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"TOTAL_POOR",
                     "visible":true
                  },
                  {
                     "fieldName":"TYPE",
                     "label":"TYPE",
                     "visible":true
                  },
                  {
                     "fieldName":"Shape__Area",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"Shape__Area",
                     "visible":true
                  },
                  {
                     "fieldName":"Shape__Length",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"Shape__Length",
                     "visible":true
                  }
               ],
               "title":"Parks and Open Space"
            },
            "screenSizePerspective":true
         },
         {
            "id":"164a5a40b71-layer-3",
            "title":"Trails",
            "url":"https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trails/FeatureServer/0",
            "layerType":"ArcGISFeatureLayer",
            "popupInfo":{
               "showAttachments":true,
               "popupElements":[
                  {
                     "type":"fields"
                  },
                  {
                     "type":"attachments"
                  }
               ],
               "fieldInfos":[
                  {
                     "fieldName":"FID",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"FID",
                     "visible":true
                  },
                  {
                     "fieldName":"TRL_NAME",
                     "label":"TRL_NAME",
                     "visible":true
                  },
                  {
                     "fieldName":"TRL_ID",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"TRL_ID",
                     "visible":true
                  },
                  {
                     "fieldName":"ELEV_MIN",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"ELEV_MIN",
                     "visible":true
                  },
                  {
                     "fieldName":"ELEV_MAX",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"ELEV_MAX",
                     "visible":true
                  },
                  {
                     "fieldName":"ELEV_GAIN",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"ELEV_GAIN",
                     "visible":true
                  },
                  {
                     "fieldName":"LENGTH_FT",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"LENGTH_FT",
                     "visible":true
                  },
                  {
                     "fieldName":"LENGTH_MI",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"LENGTH_MI",
                     "visible":true
                  },
                  {
                     "fieldName":"USE_HIKE",
                     "label":"USE_HIKE",
                     "visible":true
                  },
                  {
                     "fieldName":"USE_BIKE",
                     "label":"USE_BIKE",
                     "visible":true
                  },
                  {
                     "fieldName":"USE_EQU",
                     "label":"USE_EQU",
                     "visible":true
                  },
                  {
                     "fieldName":"USE_ATV",
                     "label":"USE_ATV",
                     "visible":true
                  },
                  {
                     "fieldName":"PET_ACC",
                     "label":"PET_ACC",
                     "visible":true
                  },
                  {
                     "fieldName":"Shape__Length",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"Shape__Length",
                     "visible":true
                  }
               ],
               "title":"Trails"
            },
            "screenSizePerspective":true
         },
         {
            "id":"164a5a4587c-layer-4",
            "title":"Trailheads",
            "url":"https://services3.arcgis.com/GVgbJbqm8hXASVYi/ArcGIS/rest/services/Trailheads/FeatureServer/0",
            "layerType":"ArcGISFeatureLayer",
            "popupInfo":{
               "showAttachments":true,
               "popupElements":[
                  {
                     "type":"fields"
                  },
                  {
                     "type":"attachments"
                  }
               ],
               "fieldInfos":[
                  {
                     "fieldName":"OBJECTID",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"OBJECTID",
                     "visible":true
                  },
                  {
                     "fieldName":"TRL_NAME",
                     "label":"TRL_NAME",
                     "visible":true
                  },
                  {
                     "fieldName":"PARK_NAME",
                     "label":"PARK_NAME",
                     "visible":true
                  },
                  {
                     "fieldName":"TRL_ID",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"TRL_ID",
                     "visible":true
                  },
                  {
                     "fieldName":"SEG_ID",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"SEG_ID",
                     "visible":true
                  },
                  {
                     "fieldName":"FEATURE",
                     "label":"FEATURE",
                     "visible":true
                  },
                  {
                     "fieldName":"FEAT_CMNT",
                     "label":"FEAT_CMNT",
                     "visible":true
                  },
                  {
                     "fieldName":"ELEV_FT",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"ELEV_FT",
                     "visible":true
                  },
                  {
                     "fieldName":"CITY_JUR",
                     "label":"CITY_JUR",
                     "visible":true
                  },
                  {
                     "fieldName":"ZIP_CODE",
                     "format":{
                        "digitSeparator":true,
                        "places":0
                     },
                     "label":"ZIP_CODE",
                     "visible":true
                  },
                  {
                     "fieldName":"SUP_DIST",
                     "label":"SUP_DIST",
                     "visible":true
                  },
                  {
                     "fieldName":"X_STREET",
                     "label":"X_STREET",
                     "visible":true
                  },
                  {
                     "fieldName":"PARKING",
                     "label":"PARKING",
                     "visible":true
                  },
                  {
                     "fieldName":"PHOTO",
                     "label":"PHOTO",
                     "visible":true
                  },
                  {
                     "fieldName":"LAT",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"LAT",
                     "visible":true
                  },
                  {
                     "fieldName":"LON",
                     "format":{
                        "digitSeparator":true,
                        "places":2
                     },
                     "label":"LON",
                     "visible":true
                  }
               ],
               "title":"Trailheads"
            },
            "screenSizePerspective":true
         }
      ],
      "baseMap":{
         "baseMapLayers":[
            {
               "id":"World_Imagery_2017",
               "title":"World Imagery",
               "url":"https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
               "layerType":"ArcGISTiledMapServiceLayer"
            }
         ],
         "id":"16a0864b65d-basemap-6",
         "title":"Imagery",
         "elevationLayers":[
            {
               "id":"globalElevation",
               "listMode":"hide",
               "title":"Terrain3D",
               "url":"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
               "layerType":"ArcGISTiledElevationServiceLayer"
            }
         ]
      },
      "ground":{
         "layers":[
            {
               "id":"globalElevation",
               "listMode":"hide",
               "title":"Terrain3D",
               "url":"https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
               "layerType":"ArcGISTiledElevationServiceLayer"
            }
         ],
         "transparency":0,
         "navigationConstraint":{
            "type":"stayAbove"
         }
      },
      "heightModelInfo":{
         "heightModel":"gravity_related_height",
         "heightUnit":"meter"
      },
      "version":"1.15",
      "authoringApp":"WebSceneViewer",
      "authoringAppVersion":"7.1.0.0",
      "initialState":{
         "environment":{
            "lighting":{
               "datetime":1521143714000,
               "displayUTCOffset":-8
            },
            "atmosphereEnabled":true,
            "starsEnabled":true
         },
         "viewpoint":{
            "camera":{
               "position":{
                  "spatialReference":{
                     "latestWkid":3857,
                     "wkid":102100
                  },
                  "x":-1.3225583646550745E7,
                  "y":4024906.147778172,
                  "z":2302.7733840774745
               },
               "heading":0.03829051473383194,
               "tilt":70.94183256161617
            }
         }
      },
      "spatialReference":{
         "latestWkid":3857,
         "wkid":102100
      },
      "viewingMode":"global"
    }
    

Now that you have a web scene, you can choose to style it further in a tutorial. Or, you can load it into a tutorial by accessing it by its item ID.

What's next?

Learn how to use additional tools, APIs, and location services in these tutorials:

ToolsAPIs