Skip To ContentArcGIS for DevelopersSign In Dashboard
require(["esri/geometry/Mesh"], function(Mesh) { /* code goes here */ });
Class: esri/geometry/Mesh
Inheritance: Mesh Geometry Accessor
Since: ArcGIS API for JavaScript 4.7

A mesh is a general, client-side 3D geometry type composed of vertices with attributes. The vertices include geographic position, normals that affect lighting/shading and uv coordinates that can be used to map images to the mesh. Vertices are combined into 3D primitives to render the mesh in the scene (only triangle primitives are currently supported).

Mesh geometries can have an intrinsic material that determines how it is being displayed. Similar to 3D objects in scene layers, mesh geometries are symbolized with a MeshSymbol3D symbol containing a FillSymbol3DLayer.

To support multiple materials (as is often the case for complex 3D models), meshes may define components that define a material for a specific region in the mesh. In addition to supporting multiple materials, components can also reuse vertices that would otherwise be duplicated to form triangles.

Create simple mesh geometry primitives

The mesh geometry class has a number of convenience functions to create simple primitive shapes. These shapes can help you get started with understanding mesh geometries.

// Create a box mesh geometry
var mesh = Mesh.createBox(location, {
  size: {
    width: 100,
    height: 50,
    depth: 50
  },
  material: {
    color: "red"
  }
});

// Create a graphic and add it to the view
var graphic = new Graphic({
  geometry: mesh,
  symbol: {
    type: "mesh-3d",
    symbolLayers: [ { type: "fill" } ]
  }
});

view.graphics.add(graphic);

Create mesh geometries manually

Mesh geometries can be manually created by specifying vertexAttributes and components like in the following example:

// Create a mesh geometry representing a pyramid
var pyramidMesh = new Mesh({
  vertexAttributes: {
    // vertex positions for the Louvre pyramid, Paris
    position: [
      // vertex 0 - base of the pyramid, south
      2.336006, 48.860818, 0,

      // vertex 1 - base of the pyramid, east
      2.336172, 48.861114, 0,

      // vertex 2 - base of the pyramid, north
      2.335724, 48.861229, 0,

      // vertex 3 - base of the pyramid, west
      2.335563, 48.860922, 0,

      // vertex 4 - top of the pyramid
      2.335896, 48.861024, 21
    ]
  },
  // Add a single component with faces that index the vertices
  // so we only need to define them once
  components: [
    {
      faces: [
        0, 4, 3,
        0, 1, 4,
        1, 2, 4,
        2, 3, 4
      ]
    }
  ],
  // specify a spatial reference if the position of the vertices is not in WGS84
});

// add the mesh geometry to a graphic
var graphic = new Graphic({
  geometry: pyramidMesh,
  symbol: {
    type: "mesh-3d",
    symbolLayers: [ { type: "fill" } ]
  }
});

view.graphics.add(graphic);

Note: Starting with version 4.11 autocasting is no longer supported for Mesh geometry.

See also:

Constructors

new Mesh(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
Object

The cache is used to store values computed from geometries that need to cleared or recomputed upon mutation.

more details
more detailsGeometry
MeshComponent[]

An array of mesh components that can be used to apply materials to different regions of the same mesh.

more details
more detailsMesh
String

The name of the class.

more details
more detailsAccessor
Extent

The 3D extent of the mesh geometry.

more details
more detailsMesh
Boolean

Indicates if the geometry has M values.

more details
more detailsGeometry
Boolean

Indicates if the geometry has Z (elevation) values.

more details
more detailsGeometry
SpatialReference

The spatial reference of the geometry.

more details
more detailsGeometry
String

For Mesh, the type is always mesh.

more details
more detailsMesh
Accessor

Object describing the attributes of each vertex of the mesh.

more details
more detailsMesh

Property Details

cache Objectreadonly inherited

The cache is used to store values computed from geometries that need to cleared or recomputed upon mutation. An example is the extent of a polygon.

An array of mesh components that can be used to apply materials to different regions of the same mesh. There are three common usage patterns for components.

  1. Specify a material for the whole mesh. In this case, use a single component with only a material (leaving faces as null).
  2. Reuse vertex attributes. When modeling continuous surfaces, it can be convenient to only specify vertices once and then simply refer to them. In this case, use a single component with faces set to index the vertex attributes that form triangles.
  3. Specify multiple materials for the same mesh. In this case, use multiple components with faces that determine to which region of the mesh the material of the component applies.
declaredClass Stringreadonly inherited

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

extent Extentreadonly

The 3D extent of the mesh geometry. The extent is computed from the vertex positions stored in the vertexAttributes. The 3D extent is computed on-demand and cached. If you modify the vertexAttributes manually, then you must call vertexAttributesChanged() to make sure the extent will be recomputed.

Indicates if the geometry has M values.

Indicates if the geometry has Z (elevation) values.

Z-values defined in a geographic or metric coordinate system are expressed in meters. However, in local scenes that use a projected coordinate system, vertical units are assumed to be the same as the horizontal units specified by the service.

The spatial reference of the geometry.

Default Value:WGS84 (wkid: 4326)
type Stringreadonly

For Mesh, the type is always mesh.

vertexAttributes Accessorautocast

Object describing the attributes of each vertex of the mesh. Vertex attributes are flat numerical arrays that describe the position (mandatory), normal (used for lighting calculations and shading) and uv (used for mapping material images to the mesh surface) for each vertex.

Vertex attributes can be addressed by indices specified in the components faces property. If the mesh does not contain any components, or if a component does not specify any faces, then the vertex attributes are interpreted as if each consecutive vertex triple makes up a triangle.

Properties:
position Float64Array
Autocasts from Number[]|Float32Array

A flat array of vertex positions. Vertex positions have x, y and z coordinates and they should be in the spatial reference system of the geometry.

optional
Autocasts from Number[]|Float64Array

A flat array of vertex uv coordinates (2 elements per vertex).

optional
Autocasts from Number[]|Float64Array

A flat array of the vertex normals (3 elements per vertex ranging from -1 to 1).

optional

Since: 4.9
A flat array of the vertex colors (4 elements per vertex ranging from 0 to 255). Vertex colors are multiplied by the component material color (if any is defined).

Example:
var mesh = new Mesh({ spatialReference: SpatialReference.WebMercator });

// Specify vertices for two triangles that make up a square
// around a provided point. Uv coordinates are setup to cover the square
// from (0, 0) to (1, 1) from corner to corner.
mesh.vertexAttributes = {
  position: [
    pt.x - 10, pt.y - 10, 100,
    pt.x + 10, pt.y - 10, 100,
    pt.x + 10, pt.y + 10, 100,

    pt.x - 10, pt.y - 10, 100,
    pt.x + 10, pt.y + 10, 100,
    pt.x - 10, pt.y + 10, 100
  ],
  uv: [
    0, 0,
    1, 0,
    1, 1,

    0, 0,
    1, 1,
    0, 1
  ]
};

Method Overview

NameReturn TypeSummaryClass

Adds a component to the mesh.

more details
more detailsMesh
Mesh

Centers the mesh at the specified location without changing its scale.

more details
more detailsMesh
Mesh

Creates a deep clone of the Mesh object.

more details
more detailsMesh
Mesh

Creates a mesh representing a box.

more details
more detailsMesh
Mesh

Creates a mesh representing a cylinder.

more details
more detailsMesh
Promise<Mesh>

Creates a new mesh geometry from a glTF model referenced by the url parameter.

more details
more detailsMesh
Mesh

Creates a new mesh geometry from a polygon geometry.

more details
more detailsMesh
Mesh

Creates a mesh representing a plane.

more details
more detailsMesh
Mesh

Creates a mesh representing a sphere.

more details
more detailsMesh
*

Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform.

more details
more detailsGeometry
Mesh

Offsets the mesh geometry by the specified distance in x, y, and z.

more details
more detailsMesh

Removes a component from the mesh.

more details
more detailsMesh
Mesh

Rotates the mesh geometry around its x, y and z axis (in that order).

more details
more detailsMesh
Mesh

Scales the mesh geometry by the specified factor.

more details
more detailsMesh
Object

Converts an instance of this class to its ArcGIS portal JSON representation.

more details
more detailsGeometry

Notifies that any cached values that depend on vertex attributes need to be recalculated.

more details
more detailsMesh

Method Details

addComponent(component)

Adds a component to the mesh.

Parameter:
Autocasts from Object

The component to add.

centerAt(location, params){Mesh}

Centers the mesh at the specified location without changing its scale. The mesh will be modified in place. To modify a copy of the mesh instead, use clone() before calling centerAt().

Parameters:
Specification:
location Point

The location at which to center the mesh.

params Object
optional

Additional parameters.

Specification:
geographic Boolean
optional

Indicates whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the offset applied to center the mesh is applied in a Cartesian system with respect to the local coordinate system on the globe and is specified in meters.

origin Point
optional

The origin at which to center. If not specified, the mesh will be centered at the mesh extent center.

Returns:
TypeDescription
MeshThe modified mesh.
clone(){Mesh}

Creates a deep clone of the Mesh object.

Returns:
TypeDescription
MeshA new instance of a Mesh object equal to the object used to call .clone().
createBox(location, params){Mesh}static

Creates a mesh representing a box. The spatial reference of the resulting mesh is the same as the location where it is placed.

Box UV coordinate space

The box geometry will have UV coordinates generated according to the following scheme:

Parameters:
Specification:
location Point

The location bottom center of the box.

params Object
optional

Additional parameters.

Specification:
optional

A uniform size value or an object containing individual values width, height and depth. The unit of the size values is derived from the spatial reference of the provided location, unless a unit is specified.

Specification:
width Number
optional

The width of the created mesh.

depth Number
optional

The depth of the created mesh.

height Number
optional

The height of the created mesh.

geographic Boolean
optional

Whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the mesh is created in a Cartesian system with respect to the local coordinate system on the globe and sizes are specified in meters.

unit String
optional

The unit of the size (defaults to the unit of the location's spatial reference).

Possible Values: millimeters | centimeters | decimeters | meters | kilometers | inches | feet | yards | miles | nautical-miles | us-feet

material MeshMaterial
optional

The material to be used for the mesh.

imageFace String
optional

The face for generating image uv coordinates. By default, a single set of unwrapped UV coordinates are generated for all the faces. By setting the imageFace parameter to one of east, west, north, south, up or down, the specified face will have full sized UV coordinates while the other faces will pertain their regular unwrapped UV coordinates. This is useful for applying an image only to a single face of the box. The provided material parameter will be applied to the specified imageFace. The resulting mesh will have two components, the first contains the selected image face and the second contains the other faces of the box.

Returns:
TypeDescription
MeshThe resulting mesh.
Examples:
var mesh = Mesh.createBox(point, {
  size: {
    width: 10,
    height: 100,
    depth: 20
  },
  material: {
    color: "green"
  }
});
var mesh = Mesh.createBox(point, {
  imageFace: "top",
  material: {
    color: "./url-to-image.png"
  }
});
createCylinder(location, params){Mesh}static

Creates a mesh representing a cylinder. The spatial reference of the resulting mesh is the same as the location where it is placed.

Cylinder UV coordinate space

The cylinder geometry will have UV coordinates generated according to the following scheme (example is shown for 8 vertices cylinder):

Parameters:
Specification:
location Point

The location of the bottom center of the cylinder.

params Object
optional

Additional parameters.

Specification:
optional

A uniform size value or an object containing individual values width, height and depth. The unit of the size values is derived from the spatial reference of the provided location, unless a specific unit is specified.

Specification:
width Number
optional

The width of the created mesh.

depth Number
optional

The depth of the created mesh.

height Number
optional

The height of the created mesh.

geographic Boolean
optional

Whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the mesh is created in a Cartesian system with respect to the local coordinate system on the globe and sizes are specified in meters.

unit String
optional

The unit of the size (defaults to the unit of the location's spatial reference).

Possible Values: millimeters | centimeters | decimeters | meters | kilometers | inches | feet | yards | miles | nautical-miles | us-feet

densificationFactor Number
optional

The additional number of subdivisions for generating the mesh representing a cylinder. A densificationFactor parameter of 0 will generate a default of 16 vertices to approximate the cylinder. A densificationFactor of 1 will generate 32 vertices, etc. The larger the densificationFactor, the better the mesh will approximate a perfect cylinder (at the cost of processing and rendering performance).

material MeshMaterial
optional

The material to be used for the mesh.

Returns:
TypeDescription
MeshThe resulting mesh.
createFromGLTF(location, url, params){Promise<Mesh>}static
Since: ArcGIS API for JavaScript 4.11

Creates a new mesh geometry from a glTF model referenced by the url parameter. The spatial reference of the resulting mesh is the same as the location parameter. For more information on the supported glTF features you can read the Visualizing points with 3D symbols guide topic. Animations are currently not supported.

Parameters:
Specification:
location Point

The location of the origin of the model. If the location doesn't contain a z value, z is assumed to be 0.

url String

The URL of the glTF model. The URL should point to a glTF file (.gltf or .glb) which can reference additional binary (.bin) and image files (.jpg, .png).

params Object
optional

Additional parameters.

Specification:
geographic Boolean
optional

Whether the model coordinates should be relative to the geographic or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the mesh is created in a Cartesian system with respect to the local coordinate system on the globe and sizes are specified in meters.

optional

An AbortSignal to abort the loading process. If canceled, the promise will be rejected with an error named AbortError. See also AbortController.

Returns:
TypeDescription
Promise<Mesh>A promise that resolves to a mesh geometry representing the loaded glTF model.
createFromPolygon(polygon, params){Mesh}static

Creates a new mesh geometry from a polygon geometry. The resulting mesh contains only a position vertex attribute and a single component with faces. The default shading will be set to flat. The spatial reference of the resulting mesh is the same as the input polygon. The resulting mesh will not contain any uv nor normal vertex attributes.

Parameters:
polygon Polygon

The input polygon.

params Object
optional

Optional parameters.

Specification:
material MeshMaterial
optional

The material to be used for the mesh.

Returns:
TypeDescription
MeshA new mesh representing the triangulated polygon.
createPlane(location, params){Mesh}static

Creates a mesh representing a plane. The spatial reference of the resulting mesh is the same as the location where it is placed. A plane consists of two triangles and may be conveniently oriented at creation time.

Plane UV coordinate space

The plane geometry will have UV coordinates generated according to the following scheme:

Parameters:
Specification:
location Point

The location of the bottom center of the plane.

params Object
optional

Additional parameters.

Specification:
optional

A uniform size value or an object containing individual values width and height. The unit of the size values is derived from the spatial reference of the provided location, unless a unit is specified.

Specification:
width Number
optional

The width of the created mesh.

height Number
optional

The height of the created mesh.

facing String
optional

Direction the plane is facing. Possible values are east, west, north, south, up and down. Defaults to up,

geographic Boolean
optional

Whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the mesh is created in a Cartesian system with respect to the local coordinate system on the globe and sizes are specified in meters.

unit String
optional

The unit of the size (defaults to the unit of the location's spatial reference).

Possible Values: millimeters | centimeters | decimeters | meters | kilometers | inches | feet | yards | miles | nautical-miles | us-feet

material MeshMaterial
optional

The material to be used for the mesh.

Returns:
TypeDescription
MeshThe resulting mesh.
createSphere(location, params){Mesh}static

Creates a mesh representing a sphere. The spatial reference of the resulting mesh is the same as the location where it is placed.

Sphere UV coordinate space

The sphere geometry will have UV coordinates generated according to the following scheme (example is shown for 8x8 vertices sphere):

Parameters:
Specification:
location Point

The location of the bottom center of the sphere.

params Object
optional

Additional parameters.

Specification:
optional

A uniform size value or an object containing individual values width, height and depth. The unit of the size values is derived from the spatial reference of the provided location, unless a unit is specified.

Specification:
width Number
optional

The width of the created mesh.

depth Number
optional

The depth of the created mesh.

height Number
optional

The height of the created mesh.

geographic Boolean
optional

Indicates whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the mesh is created in a Cartesian system with respect to the local coordinate system on the globe and sizes are specified in meters.

unit String
optional

The unit of the size (defaults to the unit of the location's spatial reference).

Possible Values: millimeters | centimeters | decimeters | meters | kilometers | inches | feet | yards | miles | nautical-miles | us-feet

densificationFactor Number
optional

The additional number of subdivisions for generating the mesh representing a sphere. A densificationFactor parameter of 0 will generate a default of 16-by-16 vertices to approximate the sphere. A densificationFactor of 1 will generate 32-by-32 vertices, etc. The larger the densificationFactor, the better the mesh will approximate a perfect sphere (at the cost of processing and rendering performance).

material MeshMaterial
optional

The material to be used for the mesh.

Returns:
TypeDescription
MeshThe resulting mesh.
fromJSON(json){*}static

Creates a new instance of this class and initializes it with values from a JSON object generated from a product in the ArcGIS platform. 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.

Parameter:
json Object

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:
TypeDescription
*Returns a new instance of this class.
offset(dx, dy, dz, params){Mesh}

Offsets the mesh geometry by the specified distance in x, y, and z. The units of x, y, and z are the units of the spatial reference. When the offset is applied geographically (default for either WGS84 or WebMercator), then the offsets are interpreted in meters. The mesh will be modified in place. To modify a copy of the mesh instead, use clone() before calling offset().

Parameters:

The amount to offset the geometry in the x direction.

The amount to offset the geometry in the y direction.

The amount to offset the geometry in the z direction.

params Object
optional

Additional parameters.

Specification:
geographic Boolean
optional

Whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the offset is applied in a Cartesian system with respect to the local coordinate system on the globe and is specified in meters.

Returns:
TypeDescription
MeshThe modified mesh (this instance).
removeComponent(component)

Removes a component from the mesh.

Parameter:
component MeshComponent

The component to remove.

rotate(angleX, angleY, angleZ, params){Mesh}

Rotates the mesh geometry around its x, y and z axis (in that order). For each rotation angle, the rotation direction is clockwise when looking in the direction of the respective axis. The mesh will be modified in place. To modify a copy of the mesh instead, use clone() before calling rotate().

Parameters:
Specification:
angleX Number

The angle by which to rotate around the x-axis (in degrees).

angleY Number

The angle by which to rotate around the y-axis (in degrees).

angleZ Number

The angle by which to rotate around the z-axis (in degrees).

params Object
optional

Additional parameters.

Specification:
geographic Boolean
optional

Whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the rotation is applied in a Cartesian system with respect to the local coordinate system on the globe and is specified in meters.

origin Point
optional

The origin around which to rotate. If not specified, the mesh will be rotated around the mesh extent center.

Returns:
TypeDescription
MeshThe modified mesh (this instance).
Example:
// rotate the mesh in the horizontal plane (around the z axis) by 90 degrees and tilt it in the lateral
// vertical plane (around the y axis) by 20 degrees.
mesh.rotate(0, 20, 90);
scale(factor, params){Mesh}

Scales the mesh geometry by the specified factor. The mesh will be modified in place. To modify a copy of the mesh instead, use clone() before calling scale().

Parameters:
Specification:
factor Number

The amount to scale the geometry.

params Object
optional

Additional parameters.

Specification:
geographic Boolean
optional

Whether to georeference relative to the globe or the projected coordinate system (PCS). This parameter is only relevant for spatial references that can be used in both local and global viewing modes (currently only WebMercator). This parameter defaults to true for WebMercator and WGS84, and false for any other PCS. When true, the offset is applied in a Cartesian system with respect to the local coordinate system on the globe and is specified in meters.

origin Point
optional

The origin point for scaling. If not specified, the mesh will be scaled around the mesh extent center.

Returns:
TypeDescription
MeshThe modified mesh (this instance).
toJSON(){Object}inherited

Converts an instance of this class to its ArcGIS portal JSON representation. See the Using fromJSON() topic in the Guide for more information.

Returns:
TypeDescription
ObjectThe ArcGIS portal JSON representation of an instance of this class.
vertexAttributesChanged()

Notifies that any cached values that depend on vertex attributes need to be recalculated. Use this method after modifying the vertex attributes in place so that values that depend on them (such as the calculation of the extent) are recalculated accordingly.

API Reference search results

NameTypeModule
Loading...