MeshTexture

MeshTexture represents image data to be used for MeshMaterial or MeshMaterialMetallicRoughness. It is mapped to the mesh by its uv vertex attributes. MeshTexture instances can be used with the MeshComponent.material property and they can be set either as a MeshMaterial.colorTexture or as MeshMaterial.normalTexture. Images can be referred to either by url or directly by data ( HTMLImageElement, HTMLCanvasElement, HTMLVideoElement or 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 }
 }
});