MeshTexture | References | ArcGIS Maps SDK for JavaScript

import MeshTexture from "@arcgis/core/geometry/support/MeshTexture.js";

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

Constructor

Parameters

Parameter	Type	Description	Required
properties	`MeshTextureProperties`

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

Properties

Any properties can be set, retrieved or listened to. See the Watch for changes topic.

Property	Type	Class
`data`	`MeshTextureData \| null`
`declaredClass` readonly inherited	`string`	Accessor
`transparent`	`boolean`
`url`	`string \| null \| undefined`
`wrap`	`TextureWrapSeparate \| MeshTextureWrap`

data

autocast Property

Type: MeshTextureData | null

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).

When cloning a MeshTexture, the data property is not deeply cloned but copied by reference instead.

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

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

transparent

Property

Type: 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.

url

Property

Type: string | null | undefined

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).

wrap

Property

Type: TextureWrapSeparate | MeshTextureWrap

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"
}

Default value: "repeat"

Methods

Method	Signature	Class
`fromJSON` inherited static	`fromJSON(json: any): any`	JSONSupportMixin
`clone` inherited	`clone(): this`	ClonableMixin
`toJSON` inherited	`toJSON(): any`	JSONSupportMixin

fromJSON

inheritedstatic Method

Signature: fromJSON (json: any): any

Inherited from: JSONSupportMixin

Creates a new instance of this class and initializes it with values from a JSON object generated from an ArcGIS product. The object passed into the input json parameter often comes from a response to a query operation in the REST API or a toJSON() method from another ArcGIS product. See the Using fromJSON() topic in the Guide for details and examples of when and how to use this function.

Parameters

Parameter	Type	Description	Required
json	`any`	A JSON representation of the instance in the ArcGIS format. See the ArcGIS REST API documentation for examples of the structure of various input JSON objects.

Returns: any
Returns a new instance of this class.

clone

inherited Method

Signature: clone (): this

Inherited from: ClonableMixin

Creates a deep clone of this object. Any properties that store values by reference will be assigned copies of the referenced values on the cloned instance.

Returns: this
A deep clone of the class instance that invoked this method.

toJSON

inherited Method

Signature: toJSON (): any

Inherited from: JSONSupportMixin

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() guide topic for more information.

Returns: any
The ArcGIS portal JSON representation of an instance of this class.

Type definitions

MeshTextureWrap

Type definition

Type: "repeat" | "clamp" | "mirror"

TextureWrapSeparate

Type definition

A separable wrap configuration for horizontal and vertical wrapping modes.

horizontal

Property

Type: MeshTextureWrap

Horizontal wrapping mode.

vertical

Property

Type: MeshTextureWrap

Vertical wrapping mode.