Tutorial: Add 3D objects

Learn how to display I3S 3D objects in a sceneA scene is a collection of layers that are displayed in 3D. It is typically composed of a basemap layer, data layers, and 3D data.Learn more.

3D objects are a type of I3S data that are used to model entities such as buildings. They are typically stored in a hosted ArcGIS scene serviceA scene service is a data service that provides access to large 3D datasets for scenes.Learn more. 3D objects are part of the I3S OGC community standard.

This tutorial explains how to add 3D objects from a scene serviceA scene service is a data service that provides access to large 3D datasets for scenes.Learn more to your CesiumJS application using the I3SDataProvider class.

The 3D objects you will use are hosted in the San Francisco 3D Objects layer.

Prerequisites

Steps

Get the starter app

Select a type of authentication and follow the steps to create a new app.

Set up authentication

Set developer credentials

Get a Cesium ion access token

All Cesium applications must use an access token provided through Cesium ion. This token allows you to access assets such as Cesium World Terrain in your application.

1. Go to your Cesium ion dashboard to generate an access token. Copy the key to your clipboard.

2. Create a cesiumAccessToken variable and replace YOUR_CESIUM_ACCESS_TOKEN with the access token you copied from the Cesium ion dashboard.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
       <script>
   
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "YOUR_PORTAL_URL" // Your portal URL
       // })
   
       // const accessToken = session.token;
   
       Cesium.ArcGisMapService.defaultAccessToken = accessToken;
   
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
   
       </script>
   

3. Configure Cesium.Ion.defaultAccessToken with the Cesium access token to validate the application.

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
       <script>
   
       /* Use for API key authentication */
       const accessToken = "YOUR_ACCESS_TOKEN";
   
       // or
   
       /* Use for user authentication */
       // const session = await arcgisRest.ArcGISIdentityManager.beginOAuth2({
       //   clientId: "YOUR_CLIENT_ID", // Your client ID from OAuth credentials
       //   redirectUri: "YOUR_REDIRECT_URI", // The redirect URL registered in your OAuth credentials
       //   portal: "YOUR_PORTAL_URL" // Your portal URL
       // })
   
       // const accessToken = session.token;
   
       Cesium.ArcGisMapService.defaultAccessToken = accessToken;
   
       const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
   
       Cesium.Ion.defaultAccessToken = cesiumAccessToken;
   
       </script>
   

Update the camera position

1. This tutorial uses a 3D object layer centered on the city of San Francisco. Update the camera to focus on the coordinates [-122.433, 37.777] with a height of 500.

   Expand

   Use dark colors for code blocksCopy

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
       const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE, {
         enablePickFeatures: false
       });
   
       const viewer = new Cesium.Viewer("cesiumContainer", {
   
         baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
   
         terrain: Cesium.Terrain.fromWorldTerrain(),
         timeline: false,
         animation: false,
         geocoder: false
   
       });
   
       // Add Esri attribution
       // Learn more in https://esriurl.com/attribution
       const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true);
       viewer.creditDisplay.addStaticCredit(poweredByEsri);
   
       viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(-122.433, 37.777, 500),
         orientation: {
           heading: Cesium.Math.toRadians(60),
           pitch: Cesium.Math.toRadians(-15.0)
         }
       });
   
   

   Expand

Add a terrain provider

To ensure that your 3D objects sit properly on top of the terrain, you need to use a geoidA geoid is a hypothetical surface representing the form the earth's oceans would take if there were no land and the water could freely respond to the earth's gravitational and centrifugal forces.Learn more service. This service will allow the elevation of the 3D objects to align with the elevation values of Cesium World Terrain.

1. Initialize a terrain provider called geoidService that references the Earth Gravitational Model EGM2008. This provider will allow for geoid conversion between the gravity-based 3D object layer and the ellipsoidal-based Cesium World Terrain.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
       // Add Esri attribution
       // Learn more in https://esriurl.com/attribution
       const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true);
       viewer.creditDisplay.addStaticCredit(poweredByEsri);
   
       viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(-122.433, 37.777, 500),
         orientation: {
           heading: Cesium.Math.toRadians(60),
           pitch: Cesium.Math.toRadians(-15.0)
         }
       });
   
       // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
       const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
   
       const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
         geoidTiledTerrainProvider: geoidService,
         token: accessToken
       });
   
   

   Expand

2. Add the data attributionData attribution is the requirement to display the names of data source providers in all applications when accessing ArcGIS content, layers, or services.Learn more for the elevation layer source.

   • Go to the EGM2008 itemAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more.
   • Scroll down to the Acknowledgments section and copy its value.
   • Paste the copied value to the credit property.
     Expand

     Use dark colors for code blocks

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
         // Add Esri attribution
         // Learn more in https://esriurl.com/attribution
         const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true);
         viewer.creditDisplay.addStaticCredit(poweredByEsri);
     
         viewer.camera.setView({
           destination: Cesium.Cartesian3.fromDegrees(-122.433, 37.777, 500),
           orientation: {
             heading: Cesium.Math.toRadians(60),
             pitch: Cesium.Math.toRadians(-15.0)
           }
         });
     
         // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
         const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
     
         // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467
         viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
     
         const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
           geoidTiledTerrainProvider: geoidService,
           token: accessToken
         });
     
     

     Expand

Add 3D objects

1. Reference the service URL of the San Francisco 3D Objects scene layerA scene layer is a data layer is used to access and display 3D data from a scene service.Learn more.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
       // Add Esri attribution
       // Learn more in https://esriurl.com/attribution
       const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true);
       viewer.creditDisplay.addStaticCredit(poweredByEsri);
   
       viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(-122.433, 37.777, 500),
         orientation: {
           heading: Cesium.Math.toRadians(60),
           pitch: Cesium.Math.toRadians(-15.0)
         }
       });
   
       // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
       const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
   
       // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467
       viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
   
       const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer";
   
   

   Expand

2. Create an I3SDataProvider by calling the fromUrl method. Pass the geoidService you created as well as your access token to provide authentication.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
       // Add Esri attribution
       // Learn more in https://esriurl.com/attribution
       const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true);
       viewer.creditDisplay.addStaticCredit(poweredByEsri);
   
       viewer.camera.setView({
         destination: Cesium.Cartesian3.fromDegrees(-122.433, 37.777, 500),
         orientation: {
           heading: Cesium.Math.toRadians(60),
           pitch: Cesium.Math.toRadians(-15.0)
         }
       });
   
       // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
       const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
   
       // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467
       viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
   
       const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer";
   
       const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
         geoidTiledTerrainProvider: geoidService,
         token: accessToken
       });
   
   

   Expand

3. Add the data attributionData attribution is the requirement to display the names of data source providers in all applications when accessing ArcGIS content, layers, or services.Learn more for the scene layer source.

   • Go to the San Francisco 3D Objects itemAn item, also known as a content item, is a resource stored in a portal such as a web map, hosted layer, style, script tool, file, or notebook.Learn more.
   • Scroll down to the Acknowledgments section and copy its value.
   • Paste the copied value to the credit property.
     Expand

     Use dark colors for code blocks

     1
     2
     3
     4
     5
     6
     7
     8
     9
     10
     11
     12
     13
     14
     15
     16
     17
     18
     19
     20
     21
     22
     23
     24
     25
     26
     27
     28
     29
     30
     31
     32
     33
     34
     35
     36
     37
     38
     39
     40
     41
     42
     43
     44
     45
     46
     47
     48
     49
     50
     51
     52
     53
     54
     55
     56
     57
     58
     59
     60
     61
     62
     63
     64
     65
     66
     67
     68
     69
     70
     71
     72
     73
     74
     75
     76
     77
     78
     79
     80
     81
     82
     83
     84
     85
     86
     87
     88
     89
     90
     91
     92
     93
     94
     95
         // Add Esri attribution
         // Learn more in https://esriurl.com/attribution
         const poweredByEsri = new Cesium.Credit("Powered by <a href='https://www.esri.com/en-us/home' target='_blank'>Esri</a>", true);
         viewer.creditDisplay.addStaticCredit(poweredByEsri);
     
         viewer.camera.setView({
           destination: Cesium.Cartesian3.fromDegrees(-122.433, 37.777, 500),
           orientation: {
             heading: Cesium.Math.toRadians(60),
             pitch: Cesium.Math.toRadians(-15.0)
           }
         });
     
         // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
         const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
     
         // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467
         viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
     
         const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer";
     
         const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
           geoidTiledTerrainProvider: geoidService,
           token: accessToken
         });
     
         // Attribution text retrieved from https://www.arcgis.com/home/item.html?id=f71313a22abb4431974374a009f2e54b
         viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Copyright (c) 2010-2011 PLW Modelworks, LLC", false));
     
     

     Expand

4. Add the I3S provider to your viewer as a Primitive.

   Expand

   Use dark colors for code blocks

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43
   44
   45
   46
   47
   48
   49
   50
   51
   52
   53
   54
   55
   56
   57
   58
   59
   60
   61
   62
   63
   64
   65
   66
   67
   68
   69
   70
   71
   72
   73
   74
   75
   76
   77
   78
   79
   80
   81
   82
   83
   84
   85
   86
   87
   88
   89
   90
   91
   92
   93
   94
   95
       // The source data used in this transcoding service was compiled from https://earth-info.nga.mil/#tab_wgs84-data and is based on EGM2008 Gravity Model
       const geoidService = await Cesium.ArcGISTiledElevationTerrainProvider.fromUrl("https://tiles.arcgis.com/tiles/GVgbJbqm8hXASVYi/arcgis/rest/services/EGM2008/ImageServer");
   
       // Attribution text retrieved from https://arcgis.com/home/item.html?id=d798c71512404bbb9c1551b827bf5467
       viewer.creditDisplay.addStaticCredit(new Cesium.Credit("National Geospatial-Intelligence Agency (NGA)", false));
   
       const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer";
   
       const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
         geoidTiledTerrainProvider: geoidService,
         token: accessToken
       });
   
       // Attribution text retrieved from https://www.arcgis.com/home/item.html?id=f71313a22abb4431974374a009f2e54b
       viewer.creditDisplay.addStaticCredit(new Cesium.Credit("Copyright (c) 2010-2011 PLW Modelworks, LLC", false));
   
       viewer.scene.primitives.add(i3sProvider);
   

   Expand

Run the app

Run the app. The map should display the city of San Francisco with 3D objects.

What's next?

Learn how to use additional location services in these tutorials: