Skip to main content

MeshLayer

TO BE REPLACED with @deck.gl/mesh-layers

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/react';
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](https://luma.gl/docs/api-reference/webgl/texture-2d\) 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)