MeshMaterial

材质决定了 MeshComponent 的可视化方式。 材质的主要特征之一是它的颜色， 颜色属性可用于为整个 MeshComponent 设置统一的颜色。 使用 colorTexture 属性将图像映射到格网组件上，使用为 Mesh.vertexAttributes 中的每个折点指定的 uv 坐标。

材质属性支持许多方便的自动转换类型，包括十六进制颜色字符串和众所周知的颜色字符串（自动转换为 Color），或表示 URL 的字符串影像，HTMLImageElements，HTMLCanvasElements，HTMLVideoElement，或 ImageData（自动转换为 MeshTexture）。

// 创建使用颜色的材质

const meshWithColor = new MeshComponent({
  // 自动转换为 MeshMaterial
  material: {
    color: "#ff00ff"
  }
});

// 通过链接到图像 url 创建使用纹理的材质

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

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

// 创建一个使用来自画布元素的纹理的材质

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

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

  // 创建用于填充画布的线性渐变
  const gradient = ctx.createLinearGradient(0, 0, 0, 32);
  gradient.addColorStop(0, "#00ff00");
  gradient.addColorStop(1, "#009900");

  // 用渐变图案填充画布
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 32, 32);

  return canvas;
}

const component = new MeshComponent({
  material: {
    // 将画布元素自动转换到 MeshTexture 实例
    colorTexture: createLinearGradient()
  }
});