MeshComponent

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]
});

Property Overview

Property Details

declaredClass Stringreadonly inherited

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

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 MeshMaterial|MeshMaterialMetallicRoughness

The material determines how the component is visualized.

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

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(){MeshComponent}

Creates a deep clone.

Returns

Type	Description
MeshComponent	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");