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()
  }
});