JavaScript ArcGIS MeshMaterial用法及代碼示例

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

ESM: import MeshMaterial from "@arcgis/core/geometry/support/MeshMaterial";

類： esri/geometry/support/MeshMaterial

繼承: MeshMaterial > Accessor

子類： MeshMaterialMetallicRoughness

自從：用於 JavaScript 4.11 的 ArcGIS API

材質決定了 MeshComponent 的可視化方式。材料的主要特征之一是其顏色。 color 屬性可用於為整個 MeshComponent 設置統一的顏色。使用 colorTexture 屬性將圖像映射到網格組件上，並使用為 Mesh.vertexAttributes 中的每個頂點指定的 uv 坐標。

材質屬性支持許多方便的自動轉換類型，包括十六進製顏色字符串和眾所周知的顏色字符串(自動轉換為 Color )，或表示圖像 URL 的字符串 HTMLImageElements 、HTMLCanvasElements 、HTMLVideoElement 或 ImageData (自動轉換為 MeshTexture )。

// create a material that uses a color

const meshWithColor = new MeshComponent({
  // autocasts to MeshMaterial
  material: {
    color: "#ff00ff"
  }
});

// create a material that uses a texture by linking to
// an image url

const meshTextureByUrl = new MeshTexture({
  url: "./image.png"
});

const boxMesh = Mesh.createBox(location, {
  material: {
    colorTexture: meshTextureByUrl
  }
});

// create a material that uses a texture from
// a canvas element

function createLinearGradient() {
  const canvas = document.createElement("canvas");
  canvas.width = 32;
  canvas.height = 32;

  const ctx = canvas.getContext("2d");

  // Create the linear gradient with which to fill the canvas
  const gradient = ctx.createLinearGradient(0, 0, 0, 32);
  gradient.addColorStop(0, "#00ff00");
  gradient.addColorStop(1, "#009900");

  // Fill the canvas with the gradient pattern
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 32, 32);

  return canvas;
}

const component = new MeshComponent({
  material: {
    // Autocast canvas element to MeshTexture instance
    colorTexture: createLinearGradient()
  }
});