upload-georeferenced-building.js

import SketchEdges3D from "esri/symbols/edges/SketchEdges3D";
import ObjectSymbol3DLayer from "esri/symbols/ObjectSymbol3DLayer";
import IconSymbol3DLayer from "esri/symbols/IconSymbol3DLayer";
import PointSymbol3D from "esri/symbols/PointSymbol3D";
import FillSymbol3DLayer from "esri/symbols/FillSymbol3DLayer";
import MeshSymbol3D from "esri/symbols/MeshSymbol3D";
import SpatialReference from "esri/geometry/SpatialReference";
import Mesh from "esri/geometry/Mesh";
import Map from "esri/Map";
import SceneView from "esri/views/SceneView";
import { Point } from "esri/geometry";
import Graphic from "esri/Graphic";
import WebScene from "esri/WebScene";
import SolidEdges3D from "esri/symbols/edges/SolidEdges3D";

const spatialReference = new SpatialReference({
  wkid: 3414
});

const view = new SceneView({
  container: "viewDiv",

  map: new WebScene({
    portalItem: {
      id: "1765f07ded6d4c40802f779c60321642"
    }
  }),
  spatialReference
});

const input = document.querySelector("input");
const uploadBtn = document.getElementById("upload-model-button");
view.ui.add(uploadBtn, "bottom-right");
uploadBtn.addEventListener("click", () => input.click());

view.when(async () => {
  // a grid of 1500m x 1500m
  generateGrid(view, 1500);

  const layer = view.map.layers
    .filter((l) => l.title === "ScenarioFunanMall")
    .getItemAt(0) as __esri.SceneLayer;

  input.addEventListener("change", async (event) => {
    const input = event.target as HTMLInputElement;
    const [file] = Array.from(input.files);
    if (file) {
      uploadModel(file);
    }
  });

  const uploadModel = async (file) => {
    const mesh = await layer.convertMesh([file], {
      location: new Point({ x: 0, y: 0, z: 0, spatialReference })
    });

    console.log(mesh);

    const graphic = new Graphic({
      symbol: new MeshSymbol3D({
        symbolLayers: [
          new FillSymbol3DLayer({
            material: {
              color: "white"
            },
            edges: new SolidEdges3D({
              color: "rgb(100, 100, 100)"
            })
          })
        ]
      }),
      geometry: mesh
    });

    view.graphics.add(graphic);
    await view.goTo(graphic);
    layer
      .applyEdits({ addFeatures: [graphic] })
      .then(() => {
        console.log("updated");
      })
      .catch((error) => console.log(error));
  };
});