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