MeshTexture

AMD: require(["esri/geometry/support/MeshTexture"], (MeshTexture) => { /* code goes here */ });
ESM: import MeshTexture from "@arcgis/core/geometry/support/MeshTexture.js";
Class: esri/geometry/support/MeshTexture
Inheritance: MeshTexture Accessor
Since: ArcGIS Maps SDK for JavaScript 4.11

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

Constructors

new MeshTexture(properties)
Parameter
properties Object
optional

See the properties for a list of all the properties that may be passed into the constructor.

Property Overview

Any properties can be set, retrieved or listened to. See the Working with Properties topic.
Show inherited properties Hide inherited properties
Name Type Summary Class
HTMLImageElement|HTMLCanvasElement|HTMLVideoElement|ImageData

A direct reference to the image or video data.

more details
MeshTexture
String

The name of the class.

more details
Accessor
Boolean

Indicates whether the image data should be interpreted as being semi-transparent.

more details
MeshTexture
String

The url to the image resource.

more details
MeshTexture
String|SeparableWrapModes

Specifies how uv coordinates outside the [0, 1] range are handled.

more details
MeshTexture

Property Details

A direct reference to the image or video data. The data can be an image element, canvas element, video element or ImageData. If the data is set to a video element, the element needs to be visible in the DOM. The data property is mutually exclusive with the url property, setting the data will clear the url (if there is one).

declaredClass Stringreadonly inherited

The name of the class. The declared class name is formatted as esri.folder.className.

transparent Boolean

Indicates whether the image data should be interpreted as being semi-transparent. The default value is automatically derived when the data property contains a canvas element or an ImageData object. If instead a url to a .png file was provided, it is assumed that transparency is present. In all other cases it defaults to false.

Default Value:undefined
url String

The url to the image resource. This can either be a remote url (absolute or relative) or a data url. Video resources can only be loaded using the data property. The url property is mutually exclusive with the data property, setting the url will clear the data (if there is one).

Specifies how uv coordinates outside the [0, 1] range are handled. One of "repeat", "clamp" or "mirror". Can also be specified separately for the two texture axes using an object:

{
  vertical: "clamp",
  horizontal: "repeat"
}

Possible Values:"clamp"|"repeat"|"mirror"

Default Value:"repeat"

Method Overview

Show inherited methods Hide inherited methods
Name Return Type Summary Class

Adds one or more handles which are to be tied to the lifecycle of the object.

more details
Accessor
MeshTexture

Creates a deep clone.

more details
MeshTexture
Boolean

Returns true if a named group of handles exist.

more details
Accessor

Removes a group of handles owned by the object.

more details
Accessor

Method Details

addHandles(handleOrHandles, groupKey)inherited
Since: ArcGIS Maps SDK for JavaScript 4.25

Adds one or more handles which are to be tied to the lifecycle of the object. The handles will be removed when the object is destroyed.

// Manually manage handles
const handle = reactiveUtils.when(
  () => !view.updating,
  () => {
    wkidSelect.disabled = false;
  },
  { once: true }
);

this.addHandles(handle);

// Destroy the object
this.destroy();
Parameters
handleOrHandles WatchHandle|WatchHandle[]

Handles marked for removal once the object is destroyed.

groupKey *
optional

Key identifying the group to which the handles should be added. All the handles in the group can later be removed with Accessor.removeHandles(). If no key is provided the handles are added to a default group.

clone(){MeshTexture}

Creates a deep clone.

Returns
Type Description
MeshTexture A deep clone of the object that invoked this method.
hasHandles(groupKey){Boolean}inherited
Since: ArcGIS Maps SDK for JavaScript 4.25

Returns true if a named group of handles exist.

Parameter
groupKey *
optional

A group key.

Returns
Type Description
Boolean Returns true if a named group of handles exist.
Example
// Remove a named group of handles if they exist.
if (obj.hasHandles("watch-view-updates")) {
  obj.removeHandles("watch-view-updates");
}
removeHandles(groupKey)inherited
Since: ArcGIS Maps SDK for JavaScript 4.25

Removes a group of handles owned by the object.

Parameter
groupKey *
optional

A group key or an array or collection of group keys to remove.

Example
obj.removeHandles(); // removes handles from default group

obj.removeHandles("handle-group");
obj.removeHandles("other-handle-group");

Type Definitions

SeparableWrapModes

A separable wrap configuration for horizontal and vertical wrapping modes.

Properties
horizontal String

Horizontal wrapping mode.

Possible Values:"clamp"|"repeat"|"mirror"

vertical String

Vertical wrapping mode.

Possible Values:"clamp"|"repeat"|"mirror"

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.