{"id":2553592,"date":"2025-02-24T06:55:48","date_gmt":"2025-02-24T14:55:48","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2553592"},"modified":"2025-02-24T08:11:47","modified_gmt":"2025-02-24T16:11:47","slug":"3d-object-layer-in-arcgis-maps-sdk-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript","title":{"rendered":"3D Object Layer in ArcGIS Maps SDK for JavaScript"},"author":362592,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771,615021,738191],"tags":[776262,32331,27911],"industry":[],"product":[36831],"class_list":["post-2553592","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","category-aec","category-developers","tag-3d-editing","tag-how-to","tag-tutorial","product-js-api-arcgis"],"acf":{"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/02\/download-portal-gunnar-card.jpg","wide_image":false,"authors":[{"ID":362592,"user_firstname":"Nikola","user_lastname":"Marincic","nickname":"Nikola Marincic","user_nicename":"nmarincic","display_name":"Nikola Marincic","user_email":"nmarincic@esri.com","user_url":"https:\/\/developers.arcgis.com\/javascript\/latest\/","user_registered":"2024-09-30 06:57:36","user_description":"Nikola is a product engineer on the ArcGIS Maps SDK for JavaScript team, specializing in enhancing the 3D capabilities of Web GIS. With a background as a former architecture professor, he is committed to developing well-designed and structured products. In his spare time, Nikola enjoys composing music and running.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/nikola-marincic-headshot-extended-Medium-465x465.jpeg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"By using 3D object layers within the ArcGIS Maps SDK for JavaScript, you can implement a variety of 3D object workflows in your web applications.","flexible_content":[{"acf_fc_layout":"content","content":"<p>The <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/3d-gis\/3d-object-layer-a-comprehensive-overview\/\">first blog post<\/a> of our series provided a comprehensive introduction to 3D object layers. They act as a system of record, allowing flexible, ad-hoc editing of 3D features directly on the web. You learned how to publish these layers, set sharing permissions, manage caching, and adhere to best practices. By leveraging 3D object layers within the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/\">ArcGIS Maps SDK for JavaScript<\/a>, you can implement a variety of 3D object workflows in your web applications.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2648582,"id":2648582,"title":"City Download Portal","filename":"download-portal-gunnar-1-scaled.jpg","filesize":656863,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\/screenshot-55","alt":"A town of St. Gallen in Switzerland is visualized in 3D, with some medieval buildings selected for export.","author":"362592","description":"The City Download Portal, developed using ArcGIS Maps SDK for JavaScript, utilizes 3D object layers to represent city buildings as individual 3D models. Users can easily download these models, modify them in their own 3D modeling applications, and then upload their changes back to the layer. Image credit: Gunnar Stef\u00e1nsson, Arno Fiva","caption":"The City Download Portal, developed using ArcGIS Maps SDK for JavaScript, utilizes 3D object layers to represent city buildings as individual 3D models. Users can easily download these models, modify them in their own 3D modeling applications, and then upload their changes back to the layer. Image credit: Gunnar Stef\u00e1nsson, Arno Fiva","name":"screenshot-55","status":"inherit","uploaded_to":2553592,"date":"2025-01-10 15:25:19","modified":"2025-01-10 15:25:40","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1561,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-scaled.jpg","medium-width":428,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-scaled.jpg","medium_large-width":768,"medium_large-height":468,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-scaled.jpg","large-width":1771,"large-height":1080,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-1536x936.jpg","1536x1536-width":1536,"1536x1536-height":936,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-2048x1249.jpg","2048x2048-width":2048,"2048x2048-height":1249,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-763x465.jpg","card_image-width":763,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/download-portal-gunnar-1-1771x1080.jpg","wide_image-width":1771,"wide_image-height":1080}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/esri.github.io\/city-download-portal\/"},{"acf_fc_layout":"content","content":"<p>Utilizing the Editor widget\u2014the built-in editing component\u2014you can easily replicate the editing experience available in <a href=\"https:\/\/www.esri.com\/en-us\/arcgis\/products\/3d-scene-viewer\">Scene Viewer<\/a>. While this straightforward workflow will meet the needs of many users, some scenarios may require a more tailored approach. In such cases, you will need to learn how to integrate smaller specialized functions the API provides into larger functional units. This blog post will offer resources to assist you in achieving that.<\/p>\n"},{"acf_fc_layout":"content","content":"<p>This blog post has two primary objectives:<\/p>\n<ul>\n<li>Provide a <a href=\"#setup\">quick tutorial<\/a> on setting up your web app and recreating the Scene Viewer 3D object editing experience.<\/li>\n<li>Direct you to our new <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/3d-object-workflows\/\">3D object workflows in the SDK<\/a> guide page. On this page, you can find comprehensive information for implementing your custom workflows.<\/li>\n<\/ul>\n<p>By engaging with these resources, you will be well prepared to implement an advanced 3D object editing scenario similar to the one demonstrated in the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/editing-scenelayer-applyedits\/\">SceneLayer Upload 3D Models and ApplyEdits<\/a> sample from the JavaScript Maps SDK documentation.<\/p>\n"},{"acf_fc_layout":"content","content":"<h3>3D object layer in the SDK<\/h3>\n<p>In June 2023, ArcGIS Maps SDK for JavaScript version 4.27 introduced 3D object editing functionality. Historically, the SceneLayer class has managed all subtypes of scene layers, including the 3D object type. This update <strong>seamlessly integrated editing capabilities into the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-layers-SceneLayer.html\">SceneLayer<\/a> class<\/strong>. The class automatically handles all interactions with the associated feature layer. This enables users to perform all 3D object editing tasks with just a SceneLayer instance.<\/p>\n"},{"acf_fc_layout":"content","content":"<section id=\"setup\">\n<h2>Recreating Scene Viewer-like 3D object editing experience<\/h2>\n<\/section>\n<p>Creating or loading a web scene in the JavaScript SDK requires just a few lines of code. The tutorials <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/tutorials\/display-a-scene\/\">Display a Scene<\/a> and <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/tutorials\/display-a-web-scene\/\">Display a Web Scene<\/a>\u00a0on the ArcGIS Maps SDK for JavaScript website provide excellent guidance for this process. However, these introductory tutorials do not cover viewing modes and setting up spatial references for your use case, which is essential for real-world applications. Here, we address this gap.<\/p>\n<h3>Loading an existing web scene<\/h3>\n<p>When loading an existing web scene, it should already include a base map, an elevation layer, and the 3D object layer in the desired spatial reference. You learned how to create one in the first blog post, in the prerequisites of the <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/3d-gis\/3d-object-layer-a-comprehensive-overview\/#sceneCreation\">Editing 3D Models in Scene Viewer<\/a> chapter. The benefit of loading an already correctly set-up scene is that the correct spatial references will be loaded into your <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-WebScene.html\">WebScene<\/a> and the corresponding <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/api-reference\/esri-views-SceneView.html\">SceneView<\/a>.<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code><span style=\"color: #d73a49\">const<\/span> view = <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">SceneView<\/span>({\r\n  <span style=\"color: #005cc5\">container<\/span>: <span style=\"color: #032f62\">'viewDiv'<\/span>,\r\n  <span style=\"color: #005cc5\">map<\/span>: <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">WebScene<\/span>({\r\n    <span style=\"color: #005cc5\">portalItem<\/span>: {\r\n      <span style=\"color: #6a737d\">\/\/ Replace with PortalItemID.<\/span>\r\n      <span style=\"color: #005cc5\">id<\/span>: <span style=\"color: #032f62\">'replaceMe'<\/span>,\r\n    },\r\n  }),\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<h3>Creating a new web scene<\/h3>\n<p>When creating a new web scene, choose the viewing mode based on the available data.<\/p>\n<h4>Global scene: visualize 3D features on the globe<\/h4>\n<p>This assumes that our base maps, elevation, and other layers are available and published in the WGS 1984 or Web Mercator spatial reference. The 3D object layer should be published in the WGS 1984 spatial reference. Create a new <strong>global scene<\/strong> and use its default spatial reference.<\/p>\n<h4>Local scene: visualize 3D features on an approximated flat surface<\/h4>\n<p>This assumes our layers, base maps, elevation layers, and the 3D object layer are available and published in the desired projected coordinate system. Create a new <strong>local scene<\/strong> and specify the desired spatial reference.<\/p>\n<p>In our example, we are using LV95, a PCS for Switzerland. The following code snippet creates an LV95 scene from scratch.<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code><span style=\"color: #d73a49\">const<\/span> scene = <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">WebScene<\/span>({\r\n  <span style=\"color: #005cc5\">basemap<\/span>: <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">Basemap<\/span>({\r\n    <span style=\"color: #6a737d\">\/\/ LV95 Swiss Topographic (with Contours and Hillshade).<\/span>\r\n    <span style=\"color: #005cc5\">portalItem<\/span>: { <span style=\"color: #005cc5\">id<\/span>: <span style=\"color: #032f62\">\"03af6dc44c1e4c948eb87bbaef248f7a\"<\/span> },\r\n  }),\r\n  <span style=\"color: #005cc5\">ground<\/span>: {\r\n    <span style=\"color: #005cc5\">layers<\/span>: [\r\n      <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">ElevationLayer<\/span>({\r\n        <span style=\"color: #6a737d\">\/\/ LV95 Swiss Terrain 3D.<\/span>\r\n        <span style=\"color: #005cc5\">portalItem<\/span>: { <span style=\"color: #005cc5\">id<\/span>: <span style=\"color: #032f62\">\"0eab5ffc50da4cd2afe767c2f2851e30\"<\/span> },\r\n      }),\r\n    ],\r\n  },\r\n  <span style=\"color: #005cc5\">layers<\/span>: [\r\n    <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">SceneLayer<\/span>({\r\n      <span style=\"color: #6a737d\">\/\/ Replace with 3D Object (Scene) Layer portal item ID.<\/span>\r\n      <span style=\"color: #005cc5\">portalItem<\/span>: { <span style=\"color: #005cc5\">id<\/span>: <span style=\"color: #032f62\">\"replaceMe\"<\/span> },\r\n    }),\r\n  ],\r\n});<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<h3>Using the Editor widget<\/h3>\n<p>Using the Editor widget in ArcGIS Maps SDK for JavaScript allows you to replicate the Scene Viewer\u2019s 3D object editing experience. To implement it, create or load a scene with a 3D object layer, instantiate a new Editor instance in your app, and add it to the user interface.<\/p>\n"},{"acf_fc_layout":"content","content":"<pre><code><span style=\"color: #6a737d\">\/\/ Create an editor widget<\/span>\r\n<span style=\"color: #d73a49\">const<\/span> editor = <span style=\"color: #d73a49\">new<\/span> <span style=\"color: #6f42c1\">Editor<\/span>({\r\n  <span style=\"color: #005cc5\">view<\/span>: view,\r\n});\r\n\r\n<span style=\"color: #6a737d\">\/\/ Add it to the UI<\/span>\r\nview.ui.<span style=\"color: #6f42c1\">add<\/span>(editor, {\r\n  <span style=\"color: #005cc5\">position<\/span>: <span style=\"color: #032f62\">'top-right'<\/span>,\r\n});\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"content","content":"<p>That\u2019s all there\u2019s to it! You can now edit 3D models like you can in Scene Viewer.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2648562,"id":2648562,"title":"3D model of the \"Letzi Turm\" building in Zurich, Switzerland","filename":"SV_experience_1920_1080.jpg","filesize":445590,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\/screenshot-54","alt":"A detailed 3D model of a twin-tower building located in Zurich, Switzerland embedded in a web scene.","author":"362592","description":"Editor widget in ArcGIS Maps SDK for JavaScript can be used to recreate the Scene Viewer 3D object editing experience.","caption":"Editor widget in ArcGIS Maps SDK for JavaScript can be used to recreate the Scene Viewer 3D object editing experience.","name":"screenshot-54","status":"inherit","uploaded_to":2553592,"date":"2025-01-10 15:23:44","modified":"2025-01-10 15:51:58","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1920,"height":1077,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080.jpg","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080.jpg","medium_large-width":768,"medium_large-height":431,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080.jpg","large-width":1920,"large-height":1077,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080-1536x862.jpg","1536x1536-width":1536,"1536x1536-height":862,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080.jpg","2048x2048-width":1920,"2048x2048-height":1077,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080-826x463.jpg","card_image-width":826,"card_image-height":463,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/12\/SV_experience_1920_1080.jpg","wide_image-width":1920,"wide_image-height":1077}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Introducing the \u201c3D object workflows\u201d guide page<\/h2>\n<p>For those looking to implement a truly customized 3D object editing experience, we encourage you to explore our new guide page on <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/3d-object-workflows\/\">3D object workflows<\/a> in the JavaScript Maps SDK documentation. Similar to our first blog post, this guide is comprehensive and provides all the essential information you need. In addition to the topics covered in this blog post, you will find information on:<\/p>\n<ul>\n<li>3D object layer implementation in a nutshell<\/li>\n<li>Format conversion<\/li>\n<li>Georeferencing<\/li>\n<li>Storage and updates<\/li>\n<li>Loading 3D files<\/li>\n<li>Displaying loaded meshes<\/li>\n<li>Placing and manipulating features with SketchViewModel<\/li>\n<li>Querying by features\u2019 unique ID \/ Spatial querying<\/li>\n<li>Selecting 3D features with a mouse-click event and retrieving their geometry<\/li>\n<li>Updating and deleting features from the 3D object layer<\/li>\n<\/ul>\n"},{"acf_fc_layout":"content","content":"<h2>What\u2019s next?<\/h2>\n<p>With these resources, you will be well-equipped to implement an advanced 3D object editing scenario akin to the <a href=\"https:\/\/developers.arcgis.com\/javascript\/latest\/sample-code\/editing-scenelayer-applyedits\/\">SceneLayer Upload 3D Models and ApplyEdits<\/a> sample from the JavaScript Maps SDK documentation. The steps outlined at the end of that sample align with the functionalities discussed in this post and the guide. We highly encourage you to explore it and attempt to implement such an advanced scenario independently.<\/p>\n<p>With this foundation, we hope you feel empowered to tackle any challenges as you develop innovative applications using 3D object layers and other Esri technologies. If there are specific topics you\u2019d like us to explore in future posts, please don\u2019t hesitate to reach out. Wishing you all the best on your journey!<\/p>\n"}],"related_articles":"","show_article_image":true},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>3D Object Layer in ArcGIS Maps SDK for JavaScript<\/title>\n<meta name=\"description\" content=\"By using 3D object layers within the JavaScript Maps SDK, you can implement a variety of 3D object workflows in your web applications.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"3D Object Layer in ArcGIS Maps SDK for JavaScript\" \/>\n<meta property=\"og:description\" content=\"By using 3D object layers within the JavaScript Maps SDK, you can implement a variety of 3D object workflows in your web applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-24T16:11:47+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\"},\"author\":{\"name\":\"Nikola Marincic\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1a02ff5b03ab807ecb861b2dc6e73e79\"},\"headline\":\"3D Object Layer in ArcGIS Maps SDK for JavaScript\",\"datePublished\":\"2025-02-24T14:55:48+00:00\",\"dateModified\":\"2025-02-24T16:11:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D Editing\",\"How to?\",\"Tutorial\"],\"articleSection\":[\"3D Visualization &amp; Analytics\",\"Architecture, Engineering, and Construction\",\"Developers\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\",\"name\":\"3D Object Layer in ArcGIS Maps SDK for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2025-02-24T14:55:48+00:00\",\"dateModified\":\"2025-02-24T16:11:47+00:00\",\"description\":\"By using 3D object layers within the JavaScript Maps SDK, you can implement a variety of 3D object workflows in your web applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"3D Object Layer in ArcGIS Maps SDK for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1a02ff5b03ab807ecb861b2dc6e73e79\",\"name\":\"Nikola Marincic\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/nikola-marincic-headshot-extended-Medium-465x465.jpeg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/nikola-marincic-headshot-extended-Medium-465x465.jpeg\",\"caption\":\"Nikola Marincic\"},\"description\":\"Nikola is a product engineer on the ArcGIS Maps SDK for JavaScript team, specializing in enhancing the 3D capabilities of Web GIS. With a background as a former architecture professor, he is committed to developing well-designed and structured products. In his spare time, Nikola enjoys composing music and running.\",\"sameAs\":[\"https:\/\/developers.arcgis.com\/javascript\/latest\/\",\"https:\/\/www.linkedin.com\/in\/marincic\/\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/nmarincic\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"3D Object Layer in ArcGIS Maps SDK for JavaScript","description":"By using 3D object layers within the JavaScript Maps SDK, you can implement a variety of 3D object workflows in your web applications.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript","og_locale":"en_US","og_type":"article","og_title":"3D Object Layer in ArcGIS Maps SDK for JavaScript","og_description":"By using 3D object layers within the JavaScript Maps SDK, you can implement a variety of 3D object workflows in your web applications.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2025-02-24T16:11:47+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript"},"author":{"name":"Nikola Marincic","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1a02ff5b03ab807ecb861b2dc6e73e79"},"headline":"3D Object Layer in ArcGIS Maps SDK for JavaScript","datePublished":"2025-02-24T14:55:48+00:00","dateModified":"2025-02-24T16:11:47+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript"},"wordCount":9,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D Editing","How to?","Tutorial"],"articleSection":["3D Visualization &amp; Analytics","Architecture, Engineering, and Construction","Developers"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript","name":"3D Object Layer in ArcGIS Maps SDK for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2025-02-24T14:55:48+00:00","dateModified":"2025-02-24T16:11:47+00:00","description":"By using 3D object layers within the JavaScript Maps SDK, you can implement a variety of 3D object workflows in your web applications.","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/developers\/3d-object-layer-in-arcgis-maps-sdk-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"3D Object Layer in ArcGIS Maps SDK for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/1a02ff5b03ab807ecb861b2dc6e73e79","name":"Nikola Marincic","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/nikola-marincic-headshot-extended-Medium-465x465.jpeg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/09\/nikola-marincic-headshot-extended-Medium-465x465.jpeg","caption":"Nikola Marincic"},"description":"Nikola is a product engineer on the ArcGIS Maps SDK for JavaScript team, specializing in enhancing the 3D capabilities of Web GIS. With a background as a former architecture professor, he is committed to developing well-designed and structured products. In his spare time, Nikola enjoys composing music and running.","sameAs":["https:\/\/developers.arcgis.com\/javascript\/latest\/","https:\/\/www.linkedin.com\/in\/marincic\/"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/nmarincic"}]}},"text_date":"February 24, 2025","author_name":"Nikola Marincic","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/nmarincic","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":776262,"name":"3D Editing","slug":"3d-editing","term_group":0,"term_taxonomy_id":776262,"taxonomy":"post_tag","description":"","parent":0,"count":5,"filter":"raw"},{"term_id":32331,"name":"How to?","slug":"how-to","term_group":0,"term_taxonomy_id":32331,"taxonomy":"post_tag","description":"","parent":0,"count":115,"filter":"raw"},{"term_id":27911,"name":"Tutorial","slug":"tutorial","term_group":0,"term_taxonomy_id":27911,"taxonomy":"post_tag","description":"","parent":0,"count":183,"filter":"raw"}],"category_data":[{"term_id":23771,"name":"3D Visualization &amp; Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":686,"filter":"raw"},{"term_id":615021,"name":"Architecture, Engineering, and Construction","slug":"aec","term_group":0,"term_taxonomy_id":615021,"taxonomy":"category","description":"","parent":0,"count":129,"filter":"raw"},{"term_id":738191,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":738191,"taxonomy":"category","description":"","parent":0,"count":420,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":361,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2553592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/362592"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2553592"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2553592\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2553592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2553592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2553592"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2553592"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2553592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}