Query 3D models | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how to use SceneLayer.queryModels() and SceneLayer.queryModel() to inspect and download source and derived models from a 3D object layer. The sample lets you select features in the scene, lists the available models for those features in a side panel, and downloads the chosen model files on demand.

Use queryModels() to retrieve the model metadata for the selected features. The method returns model information grouped by object ID, and the sample converts those grouped results into rows in the side panel.

const modelsByObjectId = await sceneLayer.queryModels({ objectIds });

const entries = [...modelsByObjectId].flatMap(([objectId, models]) =>
  models.map((model) => ({
    objectId,
    model,
    format: model.format,
    isSource: model.isSource,
    files: model.files,
    size: model.size,
  })),
);

Clicking Download for a model row calls queryModel() to retrieve that specific model. If the format parameter is omitted, the source model is returned; if a format such as glb is provided, the matching derived model is returned when available. The formats supported by the service are listed in sceneLayer.capabilities.data.queryFormats. After that, download each returned ModelFileInfo with arrayBuffer().

const options = entry.isSource ? undefined : { format: entry.model.format };
const model = await sceneLayer.queryModel(entry.objectId, options);

if (!model) {
  return;
}

for (const [index, file] of model.files.entries()) {
  const blob = new Blob([await file.arrayBuffer()], { type: "application/octet-stream" });
  triggerDownload(blob, downloadName(entry, index, model.files.length));
}

If you need displayable Mesh geometry instead of model metadata or downloadable files, use SceneLayer.queryFeatures() with returnGeometry set to true.

For more detail, see the Inspecting source and derived models section in 3D object workflows in the SDK.

SceneLayer upload 3D models and applyEdits

SceneLayer upload 3D models and applyEdits

Import glTF 3D Models

Import glTF 3D Models

SceneLayer filter and query

SceneLayer filter and query

3D object workflows in the SDK

ModelFileInfo

<!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>Query 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.1/"></script>

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

      arcgis-scene {
        display: block;
        height: 100%;
      }

      .results-panel {
        width: 300px;
        --query-models-view-bottom-offset: 45px;
        max-block-size: calc(100vh - var(--query-models-view-bottom-offset));
        --calcite-panel-space: 0;
        cursor: auto;
      }

      .panel-controls {
        display: grid;
        gap: var(--calcite-space-md);
        width: 100%;
      }

      .tool-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--calcite-space-xs);
      }

      .panel-layer {
        display: grid;
        gap: var(--calcite-space-2xs);
      }

      .panel-layer-label {
        color: var(--calcite-color-text-2);
        font-size: var(--calcite-font-size--2);
      }

      .panel-layer-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--calcite-space-sm);
      }

      .panel-layer-name {
        font-size: var(--calcite-font-size--1);
        font-weight: 600;
        overflow-wrap: anywhere;
      }

      .status-text {
        padding: var(--calcite-space-md) var(--calcite-space-md) var(--calcite-space-2xs);
        color: var(--calcite-color-text-2);
        font-size: var(--calcite-font-size--1);
      }

      .results-list {
        padding: 0 var(--calcite-space-md) var(--calcite-space-md);
      }

      .results-list.is-empty {
        padding-block-start: var(--calcite-space-md);
      }

      .result-block {
        display: grid;
        gap: var(--calcite-space-xs);
        margin-block-start: var(--calcite-space-md);
      }

      .feature-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: var(--calcite-space-xs);
      }

      .feature-title {
        font-size: var(--calcite-font-size--1);
        font-weight: 700;
      }

      .feature-count {
        color: var(--calcite-color-text-2);
        font-size: var(--calcite-font-size--1);
        white-space: nowrap;
      }

      .model-row {
        display: grid;
        gap: var(--calcite-space-xs);
        padding: var(--calcite-space-sm) var(--calcite-space-md);
        border: 1px solid var(--calcite-color-border-3);
        border-radius: 6px;
        background: var(--calcite-color-foreground-1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
      }

      .model-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--calcite-space-sm);
      }

      .model-name {
        font-size: var(--calcite-font-size--1);
        font-weight: 500;
      }

      .model-meta {
        color: var(--calcite-color-text-2);
        font-size: var(--calcite-font-size--1);
      }
    </style>
  </head>

  <body>
    <arcgis-scene id="scene" item-id="e5bc4a47e27c4e8c925dbf164082e7f4" popup-disabled>
      <calcite-panel
        slot="top-right"
        class="results-panel"
        heading="Query and download model files"
        id="results-panel"
        loading
      >
        <!-- content-top is pinned above the scrolling default slot. -->
        <div slot="content-top" class="panel-controls">
          <div class="tool-row">
            <calcite-button id="pick-button" appearance="outline" icon-start="cursor" width="full">Pick</calcite-button>
            <calcite-button id="select-button" appearance="outline" icon-start="polygon" width="full"
              >Select</calcite-button
            >
            <calcite-button id="clear-button" appearance="outline" icon-start="x" width="full" disabled
              >Clear</calcite-button
            >
          </div>

          <div class="panel-layer">
            <span class="panel-layer-label">3D object layer</span>
            <div class="panel-layer-row">
              <span id="layer-chip" class="panel-layer-name">Layer</span>
              <calcite-chip id="count-chip" scale="s">No results</calcite-chip>
            </div>
          </div>

          <calcite-label scale="s" layout="inline-space-between">
            Show
            <calcite-select id="format-select" scale="s">
              <calcite-option value="source">Source models</calcite-option>
              <calcite-option value="all">All models</calcite-option>
            </calcite-select>
          </calcite-label>
        </div>

        <div id="status-text" class="status-text">Pick a feature or draw a polygon to query model files.</div>
        <div id="results-list" class="results-list"></div>
      </calcite-panel>
    </arcgis-scene>

    <script type="module">
      const [GraphicsLayer, SketchViewModel] = await $arcgis.import([
        "@arcgis/core/layers/GraphicsLayer.js",
        "@arcgis/core/widgets/Sketch/SketchViewModel.js",
      ]);

      // === CONFIGURATION ===

      const FILTER_SOURCE = "source";
      const FILTER_ALL = "all";
      const FILTER_FORMAT_PREFIX = "format:";
      const HIGHLIGHT_HOVER = "hover";

      // === DOM REFERENCES ===

      const viewElement = document.querySelector("arcgis-scene");
      const resultsPanel = document.getElementById("results-panel");
      const pickButton = document.getElementById("pick-button");
      const selectButton = document.getElementById("select-button");
      const clearButton = document.getElementById("clear-button");
      const formatSelect = document.getElementById("format-select");
      const statusText = document.getElementById("status-text");
      const resultsList = document.getElementById("results-list");
      const layerChip = document.getElementById("layer-chip");
      const countChip = document.getElementById("count-chip");

      // === RUNTIME STATE ===

      const state = {
        controlsDisabled: true,
        entries: [], // Flattened model rows currently shown in the panel.
        filter: FILTER_SOURCE,
        layerTitle: "Layer",
        loading: true,
        message: "Loading buildings...",
        mode: null,
        selectedObjectIds: [],
      };

      let view = null;
      let sceneLayer = null;
      let layerView = null;
      let sketchLayer = null;
      let sketchViewModel = null;
      let clickHandle = null;
      let pointerMoveHandle = null;
      let hoverHighlightHandle = null;
      let selectionHighlightHandle = null;
      let hoverObjectId = null;
      let hoverHitTestId = 0;
      let pickHitTestId = 0;
      // Ignore stale async results after switching modes or clearing the selection.
      let selectQueryId = 0;
      let modelsQueryId = 0;

      // === INITIALIZATION ===

      render();
      void initialize();

      async function initialize() {
        await viewElement.viewOnReady();
        view = viewElement.view;

        // Selected features use the default highlight; hover gets a lighter, temporary style.
        view.highlights.add({
          name: HIGHLIGHT_HOVER,
          color: "#80e5ff",
          fillOpacity: 0.15,
          haloColor: "#80e5ff",
          haloOpacity: 0.8,
        });

        sceneLayer = findLayerByTitle("Zurich Buildings City Center");
        sceneLayer.outFields = ["*"];
        await sceneLayer.load();

        layerView = await view.whenLayerView(sceneLayer);

        sketchLayer = new GraphicsLayer({ listMode: "hide" });
        view.map.add(sketchLayer);
        sketchViewModel = new SketchViewModel({
          view,
          layer: sketchLayer,
          updateOnGraphicClick: false, // Draw a fresh polygon instead of editing the old one.
          defaultCreateOptions: { hasZ: false },
        });
        sketchViewModel.on("create", onSketchCreate);

        state.layerTitle = sceneLayer.title || "Scene layer";
        state.message = "Pick a feature or draw a polygon to query model files.";
        state.controlsDisabled = false;
        state.loading = false;
        wireEvents();
        render();
      }

      // === EVENT LISTENERS ===

      function wireEvents() {
        pickButton.addEventListener("click", togglePickMode);
        selectButton.addEventListener("click", startPolygonSelection);
        clearButton.addEventListener("click", clearSelection);
        formatSelect.addEventListener("calciteSelectChange", updateFilter);
      }

      // === PICK MODE ===

      function togglePickMode() {
        const wasPickMode = state.mode === "pick";
        exitMode();
        if (wasPickMode) {
          render();
          return;
        }
        clearSketch();
        state.mode = "pick";
        state.message = "Click a feature in the scene to query its model files.";
        clickHandle = view.on("click", (event) => void onPick(event));
        pointerMoveHandle = view.on("pointer-move", (event) => void onPointerMove(event));
        render();
      }

      async function onPick(event) {
        // Ignore this result if another pick starts before hitTest() resolves.
        const currentHitTestId = ++pickHitTestId;
        const { results } = await view.hitTest(event, { include: [sceneLayer] });
        if (currentHitTestId !== pickHitTestId || state.mode !== "pick") {
          return;
        }

        const objectId = getObjectIdFromHitTest(results);
        if (objectId == null) {
          return;
        }

        event.stopPropagation();
        await loadModels([objectId], `Querying model files for feature ${objectId}...`);
      }

      async function onPointerMove(event) {
        const currentHitTestId = ++hoverHitTestId;
        const { results } = await view.hitTest(event, { include: [sceneLayer] });
        if (currentHitTestId !== hoverHitTestId || state.mode !== "pick") {
          return;
        }

        const objectId = getObjectIdFromHitTest(results);
        if (objectId === hoverObjectId) {
          return;
        }

        clearHoverHighlight();
        if (objectId != null) {
          hoverObjectId = objectId;
          hoverHighlightHandle = layerView.highlight(toObjectId(objectId), { name: HIGHLIGHT_HOVER });
        }
      }

      // === SELECT FEATURES BY POLYGON ===

      function startPolygonSelection() {
        exitMode();
        clearSketch();
        state.mode = "polygon";
        state.message = "Draw a polygon on the scene to select features.";
        render();
        sketchViewModel.create("polygon");
      }

      function onSketchCreate(event) {
        if (event.state === "complete") {
          state.mode = null;
          render();
          void selectByGeometry(event.graphic.geometry);
        } else if (event.state === "cancel") {
          state.mode = null;
          render();
        }
      }

      async function selectByGeometry(geometry) {
        const currentQueryId = ++selectQueryId;
        showLoading("Finding features in the drawn area...");
        // Query the SceneLayer service so the polygon uses feature geometry, not view bounding boxes.
        const query = sceneLayer.createQuery();
        query.geometry = geometry;
        query.spatialRelationship = "intersects";
        const objectIds = await sceneLayer.queryObjectIds(query);
        if (currentQueryId !== selectQueryId) {
          return;
        }

        state.selectedObjectIds = objectIds;
        highlightSelection();
        if (!objectIds.length) {
          state.entries = [];
          state.filter = FILTER_SOURCE;
          state.loading = false;
          state.message = "No features found in the drawn area.";
          render();
          return;
        }
        await loadModels(objectIds, `Querying model files for ${objectIds.length} features...`);
      }

      // === QUERY MODELS ===

      async function loadModels(objectIds, loadingMessage) {
        selectQueryId++;
        const currentQueryId = ++modelsQueryId;
        state.selectedObjectIds = objectIds;
        highlightSelection();
        showLoading(loadingMessage);
        // queryModels() returns a Map of objectId -> ModelInfo[] for the selected features.
        const models = await sceneLayer.queryModels({ objectIds });
        if (currentQueryId !== modelsQueryId) {
          return;
        }
        setEntries(models);
      }

      // === RESULTS MODEL ===

      function setEntries(modelsByObjectId) {
        state.entries = normalizeEntries(modelsByObjectId);
        state.filter = FILTER_SOURCE;
        state.loading = false;
        state.message = summaryMessage();
        render();
      }

      function summaryMessage() {
        if (!state.entries.length) {
          return "No model files for the selection.";
        }
        const featureCount = new Set(state.entries.map((entry) => entry.objectId)).size;
        return `${featureCount} feature${featureCount === 1 ? "" : "s"} selected.`;
      }

      // Flatten the objectId -> models map into the row list rendered by the panel.
      function normalizeEntries(modelsByObjectId) {
        const entries = [];
        const usedNames = new Map();
        let index = 0;
        for (const [objectId, models] of modelsByObjectId) {
          for (const model of models) {
            const files = model.files;
            const format = model.format.toUpperCase();
            const extension = format.toLowerCase();
            const baseName = uniqueName(getModelBaseName(model, objectId), extension, usedNames);
            entries.push({
              id: `${objectId}-${index++}`,
              objectId,
              model,
              files,
              format,
              extension,
              baseName,
              displayName: `${baseName}.${extension}`,
              isSource: model.isSource === true,
              size: model.size ?? files.reduce((sum, file) => sum + file.size, 0),
            });
          }
        }
        return entries;
      }

      // In this scene the source names are placeholders, so feature ids make clearer downloads.
      function getModelBaseName(model, objectId) {
        const stem = String(model.name || "")
          .trim()
          .replace(/\.[^.]+$/, "");
        return stem && stem.toLowerCase() !== "esrigeometrymultipatch" ? stem : `Feature ${objectId}`;
      }

      // Keep names distinct when a feature has several models of the same format.
      function uniqueName(baseName, extension, usedNames) {
        const key = `${baseName}.${extension}`;
        const count = (usedNames.get(key) || 0) + 1;
        usedNames.set(key, count);
        return count === 1 ? baseName : `${baseName} (${count})`;
      }

      // === FILTERING ===

      function getFilterOptions() {
        const sourceCount = state.entries.filter((entry) => entry.isSource).length;
        const counts = new Map();
        for (const entry of state.entries) {
          counts.set(entry.format, (counts.get(entry.format) || 0) + 1);
        }

        return [
          createOption(FILTER_SOURCE, `Source models (${sourceCount})`),
          createOption(FILTER_ALL, `All models (${state.entries.length})`),
          ...[...counts.entries()]
            .sort((a, b) => a[0].localeCompare(b[0]))
            .map(([format, count]) => createOption(`${FILTER_FORMAT_PREFIX}${format}`, `${format} (${count})`)),
        ];
      }

      function updateFilter() {
        state.filter = formatSelect.value || FILTER_SOURCE;
        render();
      }

      function getVisibleEntries() {
        if (state.filter === FILTER_ALL) {
          return state.entries;
        }
        if (state.filter.startsWith(FILTER_FORMAT_PREFIX)) {
          const format = state.filter.slice(FILTER_FORMAT_PREFIX.length);
          return state.entries.filter((entry) => entry.format === format);
        }
        return state.entries.filter((entry) => entry.isSource);
      }

      // === CLEAR ===

      function clearSelection() {
        exitMode();
        clearSketch();
        clearSelectionHighlight();
        clearHoverHighlight();
        selectQueryId++;
        modelsQueryId++;
        state.selectedObjectIds = [];
        state.entries = [];
        state.filter = FILTER_SOURCE;
        state.loading = false;
        state.message = "Pick a feature or draw a polygon to query model files.";
        render();
      }

      function exitMode() {
        if (state.mode === "pick") {
          clickHandle?.remove();
          pointerMoveHandle?.remove();
          clickHandle = null;
          pointerMoveHandle = null;
          pickHitTestId++;
          hoverHitTestId++;
          clearHoverHighlight();
        } else if (state.mode === "polygon") {
          sketchViewModel.cancel();
          selectQueryId++;
        }
        state.mode = null;
      }

      function clearSketch() {
        sketchViewModel?.cancel();
        sketchLayer?.removeAll();
      }

      // === DOWNLOAD ===

      async function downloadModel(entry) {
        // queryModel() returns one model's files: source as uploaded, derived by format.
        const options = entry.isSource ? undefined : { format: entry.model.format };
        const model = await sceneLayer.queryModel(entry.objectId, options);
        const files = model.files;

        for (const [index, file] of files.entries()) {
          const blob = new Blob([await file.arrayBuffer()], { type: "application/octet-stream" });
          triggerDownload(blob, downloadName(entry, index, files.length));
        }

        state.message =
          files.length === 1
            ? `Downloaded ${entry.displayName}.`
            : `Downloaded ${files.length} files for ${entry.displayName}.`;
        render();
      }

      // Identifiable file name, e.g. "Feature 12.glb"; multi-file models get a suffix.
      function downloadName(entry, index, total) {
        return total === 1 ? entry.displayName : `${entry.baseName}-${index + 1}.${entry.extension}`;
      }

      function triggerDownload(blob, fileName) {
        const url = URL.createObjectURL(blob);
        const anchor = document.createElement("a");
        anchor.href = url;
        anchor.download = fileName;
        anchor.click();
        // Keep the object URL alive long enough for the browser to start the download.
        setTimeout(() => URL.revokeObjectURL(url), 60_000);
      }

      // === HIGHLIGHT ===

      function highlightSelection() {
        clearSelectionHighlight();
        if (state.selectedObjectIds.length) {
          selectionHighlightHandle = layerView.highlight(state.selectedObjectIds.map(toObjectId));
        }
      }

      function clearSelectionHighlight() {
        selectionHighlightHandle?.remove();
        selectionHighlightHandle = null;
      }

      function clearHoverHighlight() {
        hoverObjectId = null;
        hoverHighlightHandle?.remove();
        hoverHighlightHandle = null;
      }

      // === RENDERING ===

      function render() {
        const visible = getVisibleEntries();
        const filterOptions = getFilterOptions();
        const hasSelectedFilter = filterOptions.some((option) => option.value === state.filter);

        if (!hasSelectedFilter) {
          state.filter = FILTER_SOURCE;
        }

        pickButton.disabled = state.controlsDisabled;
        selectButton.disabled = state.controlsDisabled;
        pickButton.appearance = state.mode === "pick" ? "solid" : "outline";
        selectButton.appearance = state.mode === "polygon" ? "solid" : "outline";
        viewElement.style.cursor = state.mode === "pick" ? "crosshair" : "";

        layerChip.textContent = state.layerTitle;
        countChip.textContent = state.entries.length
          ? `${visible.length} model${visible.length === 1 ? "" : "s"}`
          : "No results";
        clearButton.disabled =
          state.controlsDisabled ||
          (state.entries.length === 0 && state.mode === null && state.selectedObjectIds.length === 0);
        resultsPanel.loading = state.loading;

        formatSelect.replaceChildren(...filterOptions);
        resultsList.classList.toggle("is-empty", state.loading || visible.length === 0);

        if (state.loading) {
          statusText.hidden = true;
          resultsList.replaceChildren(createNotice(state.message));
          return;
        }

        if (!visible.length) {
          statusText.hidden = true;
          resultsList.replaceChildren(
            createNotice(state.entries.length ? "No model files match the selected view." : state.message),
          );
          return;
        }

        statusText.hidden = false;
        statusText.textContent = state.message;
        resultsList.replaceChildren(
          ...[...groupByObjectId(visible)].map(([objectId, entries]) => createFeatureBlock(objectId, entries)),
        );
      }

      function createFeatureBlock(objectId, entries) {
        const head = createElement("div", "feature-head");
        head.append(createElement("span", "feature-title", `Feature ${objectId}`));
        // Show the count only when it adds information.
        if (entries.length > 1) {
          head.append(createElement("span", "feature-count", `${entries.length} models`));
        }

        const block = createElement("section", "result-block");
        block.append(head, ...entries.map(createModelRow));
        return block;
      }

      function createModelRow(entry) {
        // The feature id is in the block header, so each row shows only the format.
        const nameLine = createElement("div", "model-line");
        nameLine.append(createElement("span", "model-name", entry.format));
        if (entry.isSource) {
          nameLine.append(createChip("Source", "outline"));
        }

        const downloadButton = document.createElement("calcite-button");
        downloadButton.scale = "s";
        downloadButton.appearance = "outline";
        downloadButton.iconStart = "download";
        downloadButton.textContent = "Download";
        downloadButton.addEventListener("click", () => void downloadModel(entry));

        const metaLine = createElement("div", "model-line");
        metaLine.append(
          createElement(
            "span",
            "model-meta",
            `${entry.files.length} file${entry.files.length === 1 ? "" : "s"} · ${bytesLabel(entry.size)}`,
          ),
          downloadButton,
        );

        const row = createElement("div", "model-row");
        row.append(nameLine, metaLine);
        return row;
      }

      // === DOM HELPERS ===

      function createElement(tag, className, text) {
        const node = document.createElement(tag);
        if (className) {
          node.className = className;
        }
        if (text != null) {
          node.textContent = text;
        }
        return node;
      }

      function createChip(text, appearance) {
        const chip = document.createElement("calcite-chip");
        chip.scale = "s";
        if (appearance) {
          chip.appearance = appearance;
        }
        chip.textContent = text;
        return chip;
      }

      function createOption(value, label) {
        const option = document.createElement("calcite-option");
        option.value = value;
        option.textContent = label;
        option.selected = value === state.filter;
        return option;
      }

      function createNotice(message) {
        const text = createElement("div", null, message);
        text.slot = "message";

        const notice = document.createElement("calcite-notice");
        notice.open = true;
        notice.icon = true;
        notice.append(text);
        return notice;
      }

      // === STATUS HELPERS ===

      function showLoading(message) {
        state.loading = true;
        state.message = message;
        render();
      }

      // === UTILITIES ===

      function findLayerByTitle(title) {
        return view.map.allLayers.find((layer) => layer.title === title);
      }

      function getObjectIdFromHitTest(results) {
        return results.find((result) => result.graphic?.layer === sceneLayer)?.graphic.getObjectId();
      }

      function groupByObjectId(entries) {
        const groups = new Map();
        for (const entry of entries) {
          if (!groups.has(entry.objectId)) {
            groups.set(entry.objectId, []);
          }
          groups.get(entry.objectId).push(entry);
        }
        return groups;
      }

      // highlight() accepts numeric objectIds; coerce values from attributes when possible.
      function toObjectId(objectId) {
        const numberValue = Number(objectId);
        return Number.isNaN(numberValue) ? objectId : numberValue;
      }

      function bytesLabel(bytes) {
        if (!bytes) {
          return "0 B";
        }
        if (bytes < 1024) {
          return `${bytes} B`;
        }
        const kb = bytes / 1024;
        return kb < 1024 ? `${kb.toFixed(1)} KB` : `${(kb / 1024).toFixed(1)} MB`;
      }
    </script>
  </body>
</html>