{"id":84722,"date":"2019-02-06T13:37:51","date_gmt":"2019-02-06T21:37:51","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcuser&p=84722"},"modified":"2024-05-13T16:37:29","modified_gmt":"2024-05-13T23:37:29","slug":"making-the-leap-to-web-3d","status":"publish","type":"arcuser","link":"https:\/\/www.esri.com\/about\/newsroom\/arcuser\/making-the-leap-to-web-3d","title":{"rendered":"Making the Leap to Web 3D"},"author":1432,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","podmotor_file_id":"","podmotor_episode_id":"","castos_file_data":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","_links_to":"","_links_to_target":""},"categories":[331,10722,10412],"tags":[17662,311,13152,1281,253762],"arcuser_issues":[63142],"class_list":["post-84722","arcuser","type-arcuser","status-publish","format-standard","hentry","category-3d","category-arcgis-api-for-javascript","category-arcgis-pro","tag-3d","tag-data-driven","tag-smart-mapping","tag-visualization","tag-world-elevation-layer","arcuser_issues-fall-2017"],"acf":{"short_description":"Although 3D web apps provide stunning visualizations and a unique way of interacting with spatial data, the thought of building a 3D app might\u2026","pdf":{"host_remotely":false,"file":"","file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"Although 3D web apps provide stunning visualizations and a unique way of interacting with spatial data, the thought of building a 3D app might be a little intimidating.<\/em>\r\n\r\nPerhaps you don\u2019t know where to find or create 3D data or the technology seems sophisticated, and you aren\u2019t sure you are ready to learn a new technology.\r\n\r\nWhat you may not know is that you already have the data, styling tools, and technology you need to build fully functional 3D web apps. And the best part\u2014you can essentially use the same skills you use to build 2D apps to build 3D apps.\r\n

Style Your 2D Data for a 3D Experience<\/h2>\r\nYou don\u2019t actually need 3D data to build a 3D app. You can style your 2D data so it works well in a 3D environment.\r\n\r\nArcGIS Pro and Scene Viewer (available with ArcGIS Online and ArcGIS Enterprise) provide styling tools that you can use to style 2D data for 3D and then save and publish it as a web scene that you can use in a web app. You can also configure the styling manually using the ArcGIS API for JavaScript, which provides all styling options to you.\r\n

Symbols<\/h3>"},{"acf_fc_layout":"image","image":84732,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Rather than visualize points with basic 2D symbols, you can use realistic 3D symbols. For example, represent trees with 3D tree symbols or street sign locations with 3D street sign symbols. You can represent points as simple volumetric point symbols such as spheres or cylinders or represent lines as tubes."},{"acf_fc_layout":"image","image":84742,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Using the ArcGIS API for Javascript, polygon data in 2D can be extruded using a height value in the attribute data. This is often done with building footprints. In 2D, building footprints are drawn on the ground. If your data also includes building heights, you can add that data to a 3D scene and extrude the buildings by height value for each building so they look like 3D buildings.\r\n

Data-Driven Visualization<\/h3>\r\nYou can create data-driven visualizations using Smart Mapping to style your 3D layers as you do when mapping in 2D. The same concepts used in 2D are applied in 3D, only now you have another dimension to work with.\r\n\r\nAttribute data can be used to drive symbol properties such as the color or size of 3D symbols. For example, when symbolizing tree data in a 2D map, you might symbolize trees using a circle icon, set the color to thematically represent the amount of carbon dioxide each tree sequesters, and set the diameter of the circle to be driven by the value of the diameter of the tree canopy."},{"acf_fc_layout":"image","image":84752,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"When representing the same data in 3D, you can represent each point with a realistic 3D tree symbol rather than a simple icon. The width of the realistic tree canopy can still be driven by the attribute values, but tree height and the trunk width can also be driven by attribute data to accurately represent the tree in 3D.\r\n\r\nWith the ArcGIS API for JavaScript, you can also build 3D scenes below as well as above the ground surface to show the location and spatial relationship of features such as pipes, wells, and earthquake locations by using attribute values in the data to extrude points below the surface. To play around with subsurface visualization, see the code sample \u201cCreate a local scene\u201d in the ArcGIS API for JavaScript documentation at js.arcgis.com.\r\n

Using Elevation to Make a 3D Scene Look Realistic<\/h2>"},{"acf_fc_layout":"image","image":84762,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"To make a 3D scene look realistic, you can add ground elevation to the scene rather than display a uniformly flat surface. The easiest way to do this is to use Esri\u2019s World Elevation layer, which is available from ArcGIS Online.\r\n\r\nThis elevation layer is a global collection of multiresolution and multisourced elevation data. It includes the best publicly available data and community-contributed data available at resolutions that range from 1,000 meters to 3 meters. This layer is added to web scenes by default in Scene Viewer, but you can choose to turn it off or use your own elevation layer.\r\n\r\nIf you create your 3D scene programmatically in the ArcGIS API for JavaScript, you can simply specify that you want to use the World Elevation layer for ground elevation using the code in Listing 1.\r\n\r\nIf you have high-resolution elevation data for a specific area that you want to use in your application, you can use it for that area and use the World Elevation Service for the rest of the globe.\r\n

Styling Considerations When Displaying Elevation<\/h3>"},{"acf_fc_layout":"blockquote","content":"
var map = new Map({\r\n\u00a0\u00a0\u00a0\u00a0basemap: \"streets\",\r\n\u00a0\u00a0\u00a0\u00a0ground: \"world-elevation\"\r\n});\r\n<\/code><\/pre>\r\nListing 1"},{"acf_fc_layout":"content","content":"When you are including elevation in your app, you don\u2019t want your data to get buried. It should be draped over the landscape, and unless you configure it otherwise, this will happen by default for all geometry types.\r\n\r\nAnother consideration has to do with the visibility of points when interacting with a 3D scene. If point symbols are drawn flat on the ground, it might be hard to see them as you navigate around the 3D scene. To mitigate this, use billboard symbols that almost float on the ground and always seem to face the viewing angle. Another option is to use line callouts (or leader lines) from icons or labels that indicate the location of each feature. This is a great option for displaying points of interest in a scene that either has varying elevations or buildings or other 3D objects that range in height and obscure point data.\r\n
Build Your 3D Web App<\/h2>\r\nYou have multiple options when it comes to building your 3D web app. You can use Scene Viewer, Web AppBuilder for ArcGIS, or the ArcGIS API for JavaScript.\r\n\r\nRight from Scene Viewer in ArcGIS Online, you can create a web app that consumes your web scene by choosing Share > CREATE A WEB APP from the Share pane. You are then presented with a selection of web application templates that you can use to configure the app with styling and other preferences specific to each application. Choose a template and click CREATE A WEB APP. It will automatically be saved to your Content and shared with everyone. Go to your Content, open the item, and configure the options available for that template. Save your changes and launch the app."},{"acf_fc_layout":"image","image":84782,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Alternatively, from the Share > CREATE A WEB APP workflow, you can choose Web AppBuilder for ArcGIS to create your 3D web app. Web AppBuilder for ArcGIS lets you select a theme from several layout options and styles and add specific widgets to your app. When you\u2019re done configuring the app, save and publish it.\r\n\r\nIf you are a developer, you can create a custom 3D web application using the ArcGIS API for JavaScript. Because this will be a purely custom implementation, you can design the exact experience you\u2019d like your app to provide. Because the configurable web templates available from Scene Viewer and Web AppBuilder for ArcGIS are built on the ArcGIS API for JavaScript, you can build similar capabilities into your application. Extensive documentation and samples to help you develop your app are available at\u00a0js.arcgis.com<\/a>."},{"acf_fc_layout":"image","image":84792,"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Apply Your 2D Programming Knowledge<\/h3>\r\nIf you are familiar with developing a 2D app using the ArcGIS API for JavaScript, you can often apply the same programming patterns when developing a 3D web app. There are many cases in which the same code can be shared between a 2D map and a 3D scene. Some developers choose to build apps that offer both a 2D and 3D view.\r\n\r\n3D apps can be just as interactive as 2D apps. Your 3D web app can have pop-ups, you can filter and query features based on the user\u2019s criteria, and you can access server-side capabilities such as geocoding and routing. The interaction you can build into a 3D app, combined with the rich experience that naturally comes with navigating data in 3D, can make a 3D app feel even more interactive than a 2D app.\r\n
What Are You Waiting For?<\/h2>\r\nPlay around with Scene Viewer using your data or any of the millions of datasets accessible in ArcGIS Online. A few of the many resources available to help you get started with your 3D web app are listed under 3D Resources. Let the fun begin!\r\n
3D Resources<\/h2>\r\n