MeshLayer

The Mesh Layer 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';
import {MeshLayer} from '@deck.gl/experimental-layers';
import {CubeGeometry} from 'luma.gl'

const App = ({data, viewport}) => {

  /**
   * 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 MeshLayer({
    id: 'mesh-layer',
    data,
    sizeScale: 100,
    texture: 'texture.png',
    mesh: new CubeGeometry()
  });

  return (<DeckGL {...viewport} layers={[layer]} />);
};

Properties

mesh (Geometry|Object)

The geometry to render for each data object. Can be a luma.gl Geometry instance, or an object of attributes.

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.

sizeScale (Number, optional)

• Default 1.

Multiplier to scale each geometry by.

getPosition (Function, optional)

• Default: object => object.position

This accessor returns the center position corresponding to an object in the data stream.

getYaw (Function, optional)

• Default: object => object.yaw || object.angle || 0

The yaw (heading) in degrees of each object.

getPitch (Function, optional)

• Default: object => object.pitch || 0

The pitch (elevation) in degrees of each object.

getRoll (Function, optional)

• Default: object => object.roll || 0

The roll (bank) in degrees of each object.

See Euler angles.

getScale (Function, optional)

• Default: object => object.scale || [1, 1, 1]

Scaling factor on the mesh along each axis.

getTranslation (Function, optional)

• Default: object => object.translation || [0, 0, 0]

Translation of the mesh along each axis. Offset from the center position given by getPosition

getMatrix (Function, optional)

• Default: object => null

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

getColor (Function|Array, optional)

• Default: [0, 0, 0, 255]

The color of each object. Only used if texture is empty.

fp64 (Boolean, optional)

• Default: false

Whether the layer should be rendered in high-precision 64-bit mode

lightSettings (Object, optional)

TO BE REPLACED

With @deck.gl/mesh-layers