Chevron DownAPI Reference

lighting

SimpleMeshLayer

The SimpleMeshLayer renders a number of arbitrary geometries. For example, a fleet of 3d cars each with a position and an orientation over the map.

import DeckGL from '@deck.gl/react';
import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
import {CubeGeometry} from 'luma.gl'

function App({data, viewState}) {
  /**
   * Data format:
   * [
   *   {
   *     position: [-122.45, 37.7],
   *     angle: 0,
   *     color: [255, 0, 0]
   *   },
   *   {
   *     position: [-122.46, 37.73],
   *     angle: 90,
   *     color: [0, 255, 0]
   *   },
   *   ...
   * ]
   */
  const layer = new SimpleMeshLayer({
    id: 'mesh-layer',
    data,
    texture: 'texture.png',
    mesh: new CubeGeometry()
  });

  return <DeckGL viewState={viewState} layers={[layer]} />;
}

Installation

To install the dependencies from NPM:

npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/mesh-layers
import {SimpleMeshLayer} from '@deck.gl/mesh-layers';
new SimpleMeshLayer({});

To use pre-bundled scripts:

<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/mesh-layers@^8.0.0/dist.min.js"></script>
new deck.SimpleMeshLayer({});

Properties

Inherits from all Base Layer properties.

Mesh

mesh (Geometry|Object|Promise)

The geometry to render for each data object. Can be a luma.gl Geometry instance, or an object of attributes, a Promise that resolves to one of the above, or a URL to a mesh description file in a format supported by loaders.gl (the appropriate loader will have to be registered via the loaders.gl registerLoaders function for this usage).

The following attributes are expected:

  • positions (Float32Array) - 3d vertex offset from the object center, in meters
  • normals (Float32Array) - 3d nomals
  • texCoords (Float32Array) - 2d texture coordinates
texture (Texture2D|Image|String, optional)
  • Default null.

The texture of the geometries. Can be either a luma.gl Texture2D instance, an HTMLImageElement, or a url string to the texture image.

If texture is supplied, texture is used to render the geometries. Otherwise, object color obtained via the getColor accessor is used.

Render Options

sizeScale (Number, optional) transition-enabled
  • Default 1.

Multiplier to scale each geometry by.

wireframe (Boolean, optional)
  • Default: false

Whether to render the mesh in wireframe mode.

material (Object, optional)
  • Default: true

This is an object that contains material props for lighting effect applied on extruded polygons. Check the lighting guide for configurable settings.

Data Accessors

getPosition (Function, optional) transition-enabled
  • Default: object => object.position

Method called to retrieve the center position for each object in the data stream.

getColor (Function|Array, optional) transition-enabled
  • Default: [0, 0, 0, 255]

The rgba color is in the format of [r, g, b, [a]]. Each channel is a number between 0-255 and a is 255 if not supplied.. Only used if texture is empty.

  • If an array is provided, it is used as the color for all objects.
  • If a function is provided, it is called on each object to retrieve its color.
getOrientation (Function|Array, optional)
  • Default: [0, 0, 0]

Object orientation defined as a vec3 of Euler angles, [pitch, yaw, roll] in degrees. This will be composed with layer's modelMatrix.

  • If an array is provided, it is used as the orientation for all objects.
  • If a function is provided, it is called on each object to retrieve its orientation.
getScale (Function|Array, optional)
  • Default: [1, 1, 1]

Scaling factor on the mesh along each axis.

  • If an array is provided, it is used as the scale for all objects.
  • If a function is provided, it is called on each object to retrieve its scale.
getTranslation (Function|Array, optional)
  • Default: [0, 0, 0]

Translation of the mesh along each axis. Offset from the center position given by getPosition. [x, y, z] in meters. This will be composed with layer's modelMatrix.

  • If an array is provided, it is used as the offset for all objects.
  • If a function is provided, it is called on each object to retrieve its offset.
getTransformMatrix (Function|Array, optional)
  • Default: null

Explicitly define a 4x4 column-major model matrix for the mesh. If provided, will override getOrientation, getScale, getTranslation.

  • If an array is provided, it is used as the transform matrix for all objects.
  • If a function is provided, it is called on each object to retrieve its transform matrix.

Source

modules/mesh-layers/src/simple-mesh-layer