Import glTF 3D Models | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to add glTF models to a Scene component. The glTF (GL Transmission Format) is a file format for 3D models (e.g. animals, buildings and vehicles) using the JSON standard. For more information on the supported glTF features you can read the Visualizing points with 3D symbols guide topic.

In this sample you can add tents and canoe boats in glTF format in a camping place in Denali National Park. Using the SketchViewModel you can resize, rotate and move the graphics after adding them to the scene:

import-gltf

The model is loaded as an ObjectSymbol3DLayer by specifying a link to the glTF file as a resource:

const symbol = {
  type: "point-3d",
  symbolLayers: [
    {
      type: "object",
      height: 10,
      resource: {
        href: "./tent.glb",
      },
    },
  ],
};

The URL can point to either a glTF file (.gltf) referencing external binary resources (.bin file and textures) or a single binary file (.glb).

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Import glTF 3D Models | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
      }

      calcite-panel {
        max-width: 200px;
        margin: 0 auto;
      }

      calcite-block {
        margin-block: 0;
        --calcite-font-size--2: 0.95rem;
      }

      #credits {
        font-size: 0.75em;
        line-height: 1.1em;
      }
    </style>
  </head>

  <body>
    <arcgis-scene item-id="414a28cfca7a471180e8e952cf14c60f">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <calcite-panel slot="top-right">
        <calcite-block
          label="UI for adding symbols into the scene"
          description="Select a symbol and place it in the scene:"
          expanded>
          <calcite-label
            ><calcite-button id="tent" width="full">Tent</calcite-button>
          </calcite-label>
          <calcite-label>
            <calcite-button id="canoe" width="full">Canoe</calcite-button>
          </calcite-label>
          <p id="credits">
            Tent and canoe glTF models from
            <a href="https://www.kenney.nl/assets/" target="_blank">Kenney game assets</a> under
            <a href="https://creativecommons.org/publicdomain/zero/1.0/" target="_blank"
              >CC0 1.0 Universal</a
            >.
          </p>
        </calcite-block>
      </calcite-panel>
    </arcgis-scene>
    <script type="module">
      const [GraphicsLayer, SketchViewModel] = await $arcgis.import([
        "@arcgis/core/layers/GraphicsLayer.js",
        "@arcgis/core/widgets/Sketch/SketchViewModel.js",
      ]);

      /*****************************************************************
       * Get a reference to the Scene component and add layers
       *****************************************************************/
      const viewElement = document.querySelector("arcgis-scene");

      const graphicsLayer = new GraphicsLayer({
        elevationInfo: { mode: "on-the-ground" },
      });

      await viewElement.viewOnReady();
      viewElement.map.add(graphicsLayer);

      const tentButton = document.getElementById("tent");
      const canoeButton = document.getElementById("canoe");

      // This sample uses the SketchViewModel to add points to a
      // GraphicsLayer. The points have 3D glTF models as symbols.
      const sketchVM = new SketchViewModel({
        layer: graphicsLayer,
        view: viewElement.view,
      });

      function setupButtonClick(button, modelName) {
        button.addEventListener("click", () => {
          // Reference the relative path to the glTF model
          // in the resource of an ObjectSymbol3DLayer
          sketchVM.pointSymbol = {
            type: "point-3d",
            symbolLayers: [
              {
                type: "object",
                resource: {
                  href: `https://developers.arcgis.com/javascript/latest/assets/sample-code/import-gltf/${modelName}.glb`,
                },
              },
            ],
          };
          sketchVM.create("point");
          makeButtonsSolid();
          button.setAttribute("appearance", "outline");
        });
      }

      // Set up event listeners for both buttons
      setupButtonClick(tentButton, "tent");
      setupButtonClick(canoeButton, "canoe");

      sketchVM.on("create", (event) => {
        switch (event.state) {
          case "complete": {
            sketchVM.update(event.graphic);
            makeButtonsSolid();
            break;
          }
          case "cancel": {
            makeButtonsSolid();
            break;
          }
        }
      });

      function makeButtonsSolid() {
        const elements = document.querySelectorAll("calcite-button");
        for (const element of elements) {
          element.setAttribute("appearance", "solid");
        }
      }
    </script>
  </body>
</html>