JavaScript ArcGIS Mesh用法及代碼示例

AMD: require(["esri/geometry/Mesh"], (Mesh) => { /* code goes here */ });

ESM: import Mesh from "@arcgis/core/geometry/Mesh";

類： esri/geometry/Mesh

繼承: Mesh > Geometry > Accessor

自從：用於 JavaScript 4.7 的 ArcGIS API

網格是一種通用的客戶端 3D geometry 類型，由具有屬性的頂點組成。頂點包括地理位置、影響光照/著色的法線以及可用於將圖像映射到網格的 uv 坐標。頂點被組合成 3D 圖元以渲染場景中的網格(當前僅支持三角形圖元)。

網格幾何體可以具有確定其顯示方式的內在材料。與場景圖層中的 3D 對象類似，網格幾何使用包含 FillSymbol3DLayer 的 MeshSymbol3D 符號進行符號化。

為了支持多種材質(複雜 3D 模型經常出現這種情況)，網格可以定義組件，這些組件為網格中的特定區域定義材質。除了支持多種材質之外，組件還可以重用否則會重複形成三角形的頂點。

創建簡單的網格幾何圖元

網格幾何類有許多方便的函數來創建簡單的原始形狀。這些形狀可以幫助您開始了解網格幾何形狀。

// Create a box mesh geometry
let mesh = Mesh.createBox(location, {
  size: {
    width: 100,
    height: 50,
    depth: 50
  },
  material: {
    color: "red"
  }
});

// Create a graphic and add it to the view
let graphic = new Graphic({
  geometry: mesh,
  symbol: {
    type: "mesh-3d",
    symbolLayers: [ { type: "fill" } ]
  }
});

view.graphics.add(graphic);

手動創建網格幾何體

可以通過指定 vertexAttributes 和組件來手動創建網格幾何圖形，如下例所示：

// Create a mesh geometry representing a pyramid
let pyramidMesh = new Mesh({
  vertexAttributes: {
    // vertex positions for the Louvre pyramid, Paris
    position: [
      // vertex 0 - base of the pyramid, south
      2.336006, 48.860818, 0,

      // vertex 1 - base of the pyramid, east
      2.336172, 48.861114, 0,

      // vertex 2 - base of the pyramid, north
      2.335724, 48.861229, 0,

      // vertex 3 - base of the pyramid, west
      2.335563, 48.860922, 0,

      // vertex 4 - top of the pyramid
      2.335896, 48.861024, 21
    ]
  },
  // Add a single component with faces that index the vertices
  // so we only need to define them once
  components: [
    {
      faces: [
        0, 4, 3,
        0, 1, 4,
        1, 2, 4,
        2, 3, 4
      ]
    }
  ],
  // specify a spatial reference if the position of the vertices is not in WGS84
});

// add the mesh geometry to a graphic
let graphic = new Graphic({
  geometry: pyramidMesh,
  symbol: {
    type: "mesh-3d",
    symbolLayers: [ { type: "fill" } ]
  }
});

view.graphics.add(graphic);

注意：從 4.11 版開始，網格幾何體不再支持自動投射。