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 版开始，网格几何体不再支持自动投射。