MeshTexture

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

// 支持格网材质构造函数中的自动转换
const meshWithAutocastMaterial = Mesh.createSphere(location, {
  material: {
    colorTexture: {
      url: "./image.png"
    }
  }
});

// 格网材质还支持其他高级自动转换类型，例如 Canvas 元素。
// 在这种情况下，画布元素将在 MeshTexture.data 属性中可用。
const meshWithCanvasAutocastMaterial = Mesh.createSphere(location, {
  material: {
    colorTexture: canvasElement
  }
});

// 当使用视频作为纹理时，需要创建一个 Video 元素
// 并将其传递给 MeshTexture.data 属性。
const video = document.createElement("video");
video.src = "./my-video.mp4";
video.crossOrigin = "anonymous";
video.autoplay = true;
video.muted = true;
// 视频需要添加到 DOM 并位于视口中才能播放。
document.body.appendChild(video);
video.style.position = "absolute";
video.style.top = 0;
// 隐藏视频元素
video.style.height = 0;
video.style.visibility = "hidden";

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