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

Property Overview

Property Details

declaredClassStringreadonly inherited

Since: ArcGIS API for JavaScript 4.7

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

facesUint32Arrayautocast

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

materialAccessorautocast

The material determines how the component is visualized. Materials specify a color that may either be a single color value (a ValueMeshColor) or an image ( an ImageMeshColor), which is mapped to the uv coordinate specified for each vertex in the mesh vertex attributes.

The material property supports a number of convenience autocast types, including hex color strings and well known color strings (autocasts to ValueMeshColor), or strings representing urls, HTMLImageElements or HTMLCanvasElements (autocasts to ImageMeshColor).

Property:

color ValueMeshColor | ImageMeshColor Autocasts from String|HTMLImageElement|HTMLCanvasElement the material color.

Example:

function createLinearGradient() {
  var canvas = document.createElement("canvas");
  canvas.width = 32;
  canvas.height = 32;

  var ctx = canvas.getContext("2d");

  // Create the linear gradient with which to fill the canvas
  var gradient = ctx.createLinearGradient(0, 0, 0, 32);
  gradient.addColorStop(0, "#00ff00");
  gradient.addColorStop(1, "#009900");

  // Fill the canvas with the gradient pattern
  ctx.fillStyle = gradient;
  ctx.fillRect(0, 0, 32, 32);

  return canvas;
}

var component = new MeshComponent({
  material: {
    // Autocast canvas element to ImageMeshColor instance
    color: createLinearGradient()
  }
});

var component2 = new MeshComponent({
  material: {
    // Autocast hex color to ValueMeshColor instance
    color: "#ff00ff"
  }
});

shadingString

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.

Method Overview

Method Details

clone(){MeshComponent}

Creates a deep clone.

Returns:

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