Skip To ContentArcGIS for DevelopersSign In Dashboard
require(["esri/geometry/support/MeshComponent"], function(MeshComponent) { /* code goes here */ });
Class: esri/geometry/support/MeshComponent
Inheritance: MeshComponent Accessor
Since: ArcGIS API 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.

var 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"
  }
});

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

  material: {
    color: "red"
  },

  shading: "smooth"
});

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

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

Constructors

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.
NameTypeSummaryClass
String

The name of the class.

more details
more detailsAccessor
Uint32Array

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

more details
more detailsMeshComponent
MeshMaterial

The material determines how the component is visualized.

more details
more detailsMeshComponent
String

Specifies the type of normals used for lighting.

more details
more detailsMeshComponent

Property Details

declaredClass Stringreadonly inherited

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

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:
var 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

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:

TypeDescription
sourceShading uses the normals as defined in the vertex attributes. If no normals are defined, then shading defaults back to flat
flatShading uses normals created per triangle face. This type of shading is good for objects with sharp edges such as boxes.
smoothShading 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.

Method Overview

NameReturn TypeSummaryClass
MeshComponent

Creates a deep clone.

more details
more detailsMeshComponent

Method Details

clone(){MeshComponent}

Creates a deep clone.

Returns:
TypeDescription
MeshComponentA deep clone of the object that invoked this method.

API Reference search results

NameTypeModule
Loading...