JavaScript ArcGIS MeshTexture用法及代码示例

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

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

类： esri/geometry/support/MeshTexture

继承: MeshTexture > Accessor

自从：用于 JavaScript 4.11 的 ArcGIS API

MeshTexture 表示要用于 MeshMaterial 或 MeshMaterialMetallicRoughness 的图像数据。它通过其 uv 顶点属性映射到网格。 MeshTexture 实例可以与 MeshComponent.material 属性一起使用，它们可以设置为 MeshMaterial.colorTexture 或 MeshMaterial.normalTexture 。可以通过 url 或直接通过数据(HTMLImageElement、HTMLCanvasElement、HTMLVideoElement 或 ImageData)引用图像。

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

const mesh = Mesh.createBox(location, {
  material: {
    colorTexture: meshColorByUrl
  }
});

const meshColorByCanvas = new MeshTexture({
  data: canvasElement
});

const meshWithCanvasMaterial = Mesh.createBox(location, {
  material: {
    colorTexture: meshColorByCanvas
  }
});

// Support for autocasting within a mesh material constructor
const meshWithAutocastMaterial = Mesh.createSphere(location, {
  material: {
    colorTexture: {
      url: "./image.png"
    }
  }
});

// Mesh materials also support additional advanced autocasting types
// such as a Canvas element. In this case the canvas element will be
// available in the MeshTexture.data property.
const meshWithCanvasAutocastMaterial = Mesh.createSphere(location, {
  material: {
    colorTexture: canvasElement
  }
});

// When using a video as a texture, you need to create a Video element
// and pass it in the MeshTexture.data property.
const video = document.createElement("video");
video.src = "./my-video.mp4";
video.crossOrigin = "anonymous";
video.autoplay = true;
video.muted = true;
// The video needs to be added to the DOM and be located in
// the viewport in order for it to play
document.body.appendChild(video);
video.style.position = "absolute";
video.style.top = 0;
// Hide the video element
video.style.height = 0;
video.style.visibility = "hidden";

const meshWithVideoMaterial = Mesh.createPlane(location, {
 material: {
   colorTexture: { data: video }
 }
});