Tutorial: Add 3D objects

Learn how to display I3S 3D objects in a scene.

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 service. 3D objects are part of the I3S OGC community standard.

This tutorial explains how to add 3D objects from a scene service 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

Create a new pen

1. To get started, either complete the Display a scene tutorial or use this pen.

Set the API key

To access location services, you need an API key or OAuth 2.0 access token. To learn how to create and scope your key, visit the Create an API key tutorial.

1. Go to your dashboard to get an API key. The API key must be scoped to access the services used in this tutorial.

2. In CodePen, update apiKey to use your key. Update cesiumAccessToken to use your Cesium ion access token.

   Use dark colors for code blocks

                                                              

   Change lineChange line

   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
         const apiKey = "YOUR_API_KEY";
   
         Cesium.ArcGisMapService.defaultAccessToken = apiKey;
   
         const cesiumAccessToken = "YOUR_CESIUM_ACCESS_TOKEN";
   
         Cesium.Ion.defaultAccessToken = cesiumAccessToken;
   
         const arcGisImagery = Cesium.ArcGisMapServerImageryProvider.fromBasemapType(Cesium.ArcGisBaseMapType.SATELLITE);
   
         const viewer = new Cesium.Viewer("cesiumContainer", {
   
           baseLayer: Cesium.ImageryLayer.fromProviderAsync(arcGisImagery),
   
         });
   

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 blocks

                                                                            

   Change lineChange lineChange lineChange lineChange lineChange lineChange line

   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
       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
   
       });
   
       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 geoid 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

                                                                            

   Add line.Add line.

   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
       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/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
       const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
           geoidTiledTerrainProvider: geoidService,
           token: apiKey
       })
   
   

   Expand

Add 3D objects

1. Reference the service URL of the San Francisco 3D Objects scene layer.

   Expand

   Use dark colors for code blocks

                                                                            

   Add line.

   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
       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/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
       const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer";
   
   

   Expand

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

   Expand

   Use dark colors for code blocks

                                                                            

   Add line.Add line.Add line.Add line.

   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
       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/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
       const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer";
   
       const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
           geoidTiledTerrainProvider: geoidService,
           token: apiKey
       })
   
   

   Expand

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

   Expand

   Use dark colors for code blocks

                                                                            

   Add line.

   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
       // 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/z2tnIkrLQ2BRzr6P/arcgis/rest/services/EGM2008/ImageServer");
   
       const i3sLayer = "https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_3DObjects_1_7/SceneServer";
   
       const i3sProvider = await Cesium.I3SDataProvider.fromUrl(i3sLayer, {
           geoidTiledTerrainProvider: geoidService,
           token: apiKey
       })
   
       viewer.scene.primitives.add(i3sProvider);
   

   Expand

Run the app

In CodePen, run your code to display the map. The map should display the city of San Francisco with 3D objects.

What's next?

Learn how to use additional ArcGIS location services in these tutorials:

Add an integrated mesh

Add a textured mesh from a scene service to a scene.

Add image tiles

Add image tiles from an image tile service to a scene.

Add features as GeoJSON

Add features from a feature service to a scene.