MeshComponent

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

The MeshComponent class is used to apply one or more materials to a single Mesh. The faces property is a flat array of indices in the mesh vertexAttributes and defines the region of vertices in the mesh on which to apply the material. Each triple of values in the flat array of indices specifies a triangle to be rendered.

To define the material for the whole mesh, faces may be set to null, which indicates that all the vertices defined for the mesh should be rendered as consecutive triangles.

A mesh component defines a material that determines how the region of triangles is colored. This mesh color can either be a single value or an image that is mapped to the vertices by means of the uv coordinates specified in the mesh vertexAttributes. The shading specifies the type of normals that are used to calculate how lighting affects mesh coloring.

Mesh components can be added to the Mesh.components[] array.

let component1 = new MeshComponent({
  // Indices refer to vertices specified in the mesh vertexAttributes.
  // Here we refer to 2 triangles composed of the first 6 vertices of the mesh.
  faces: [0, 1, 2, 3, 4, 5],

  material: {
    color: "green"
  }
});

let component2 = new MeshComponent({
  faces: [6, 7, 8, 9, 10, 11],

  material: {
    color: "red"
  },

  shading: "smooth"
});

let mesh = new Mesh({
  // ... specify vertex attributes

  components: [component1, component2]
});
See also

Constructors

MeshComponent

Constructor
new MeshComponent(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

The name of the class.

Accessor

A flat array of indices that refer to vertices in the vertexAttributes of the mesh to which the component belongs.

MeshComponent

The material determines how the component is visualized.

MeshComponent

Specifies a name of the component.

MeshComponent

Specifies the type of normals used for lighting.

MeshComponent

Property Details

declaredClass

Inherited
Property
declaredClass Stringreadonly
Inherited from Accessor

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

faces

Property
faces Uint32Arrayautocast
Autocasts from Number[]|Uint16Array

A flat array of indices that refer to vertices in the vertexAttributes of the mesh to which the component belongs. Each triple of indices defines a triangle to render (i.e. the faces array must always have a length that is a multiple of 3). Note that the indices refer to vertices and not to the index of the first coordinate of a vertex in the vertexAttributes.position array.

If faces is null, then all the vertices in the mesh will be rendered as triangles for this component.

Example
let mesh = new Mesh({
  vertexAttributes: {
    position: [
      2.336006, 48.860818, 0
      2.336172, 48.861114, 0
      2.335724, 48.861229, 0
      2.335563, 48.860922, 0
    ]
  },
  // Create two components so we can have separate materials
  // for the two triangles that we want to render.
  components: [
    {
      faces: [0, 1, 2],
      material: {
        color: "red"
      }
    },
    {
      faces: [0, 2, 3],
      material: {
        color: "green"
      }
    }
  ]
});

material

Property
material MeshMaterial |MeshMaterialMetallicRoughness

The material determines how the component is visualized.

name

Property
name String

Specifies a name of the component. The component name can be used to identify the component. Meshes created from glTF will have components with names that correspond to mesh names from the glTF.

shading

Property
shading String

Specifies the type of normals used for lighting. This determines whether the object has a smooth or an angular appearance. The following shading types are supported:

Type Description
source Shading uses the normals as defined in the vertex attributes. If no normals are defined, then shading defaults back to flat
flat Shading uses normals created per triangle face. This type of shading is good for objects with sharp edges such as boxes.
smooth Shading uses per-vertex normals that average the normals of all the faces a vertex is a part of. This type of shading is good for meshes that approximate curved surfaces such as spheres.

Possible Values:"source" |"flat" |"smooth"

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.

Accessor

Creates a deep clone.

MeshComponent

Returns true if a named group of handles exist.

Accessor

Removes a group of handles owned by the object.

Accessor

Method Details

addHandles

Inherited
Method
addHandles(handleOrHandles, groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, addHandles added at 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

Method
clone(){MeshComponent}

Creates a deep clone.

Returns
Type Description
MeshComponent A deep clone of the object that invoked this method.

hasHandles

Inherited
Method
hasHandles(groupKey){Boolean}
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, hasHandles added at 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

Inherited
Method
removeHandles(groupKey)
Inherited from Accessor
Since: ArcGIS Maps SDK for JavaScript 4.25 Accessor since 4.0, removeHandles added at 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");

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