MeshComponent | References | ArcGIS Maps SDK for JavaScript

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

Inheritance:: MeshComponent→Accessor

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

Mesh

Constructors

Constructor

Parameters

Parameter	Type	Description	Required
properties	`MeshComponentProperties`

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
`declaredClass` readonly inherited	`string`	Accessor
`faces`	`Uint32Array<ArrayBuffer> \| null \| undefined`
`material`	`MeshMaterial \| MeshMaterialMetallicRoughness \| null \| undefined`
`name`	`string \| null \| undefined`
`shading`	`MeshComponentShading`

declaredClass

readonlyinherited Property

Type: string

Inherited from: Accessor

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

faces

autocast Property

Type: Uint32Array<ArrayBuffer> | null | undefined

A flat array of indices that refer to vertices in the Mesh.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

autocast Property

Type: MeshMaterial | MeshMaterialMetallicRoughness | null | undefined

The material determines how the component is visualized.

name

Property

Type: string | null | undefined

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.

See also

Mesh.createFromGLTF()

shading

Property

Type: MeshComponentShading

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.

Default value: "source"

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

MeshComponentShading

Type definition

Type: "source" | "flat" | "smooth"