首页 / deck.gl / API 文档

SimpleMeshLayer

先看结论

简单网格图层。用一份网格数据在多个位置重复实例化，适合树、路灯、风机这类形状相同、位置不同的物体。

最后验证 2026-11-03 · deck.gl 9.0 · 更新 2026-10-29 · 引用本文

new deck.SimpleMeshLayer(props)

核心参数

参数	默认	说明
`mesh`	必填	网格 URL，或 `{ attributes, indices }` 形式的几何对象
`data`	—	位置数据数组，一个元素对应一份实例
`getPosition`	[0, 0, 0]	实例位置，`[lng, lat, z]`
`getColor`	[255, 255, 255, 255]	实例颜色，RGBA
`getOrientation`	[0, 0, 0]	朝向，`[pitch, yaw, roll]`，单位为度
`getScale`	[1, 1, 1]	三轴缩放
`getTransformMatrix`	—	4x4 变换矩阵，给定后覆盖位置、朝向与缩放
`sizeScale`	1	统一尺寸倍率，调整模型整体大小
`texture`	—	贴图 URL 或纹理对象，作用在所有实例上
`wireframe`	false	只画三角网边线，排查网格问题时使用
`material`	见下文	光照材质参数
`coordinateSystem`	LNGLAT	位置坐标系
`pickable` / `opacity`	false / 1	拾取与整体透明度

material 的默认值

字段	默认	说明
`ambient`	0.35	环境光贡献
`diffuse`	0.6	漫反射贡献
`shininess`	32	高光锐度
`specularColor`	[0, 0, 0]	高光颜色，全黑表示没有高光

示例：沿线种树

var trees = new deck.SimpleMeshLayer({
  id: 'trees',
  data: plantingPoints,           // [{ lng, lat, height }, ...]
  mesh: '/models/tree.glb',
  getPosition: function (d) { return [d.lng, d.lat, 0]; },
  getOrientation: function (d) { return [0, d.rotation || 0, 0]; },
  getScale: function (d) { return [1, d.height / 6, 1]; },
  getColor: [86, 142, 92, 255],
  sizeScale: 1,
  pickable: true
});

网格对象的结构

不用外部文件时，可以直接传几何对象。attributes.POSITION 是必需项，每个顶点三个分量；attributes.NORMAL 缺失时光照会失效，表现为整个模型一个颜色。

var mesh = {
  attributes: {
    POSITION: { value: positions, size: 3 },
    NORMAL: { value: normals, size: 3 },
    TEXCOORD_0: { value: uvs, size: 2 }
  },
  indices: { value: indices, size: 1 }
};

var layer = new deck.SimpleMeshLayer({
  id: 'custom-mesh',
  data: spots,
  mesh: mesh,
  texture: '/textures/wall.png'
});

与 ScenegraphLayer 的区别

SimpleMeshLayer 只支持单一网格，没有节点层级与骨骼动画，加载更快、显存占用更小。模型带层级结构、需要播放动画时改用 ScenegraphLayer。

v9 的不可变更新

deck.gl 9 的图层不可变。要改模型或位置，先 clone 出新图层，再通过 deckgl.setProps 替换整个 layers 数组：

var next = trees.clone({
  data: newPoints,
  sizeScale: 1.4
});

deckgl.setProps({ layers: [next] });

实例数量不是免费的。每个实例都要在顶点着色器里做一次矩阵运算，上万棵树会明显掉帧。真正的大规模植被用图层离屏渲染或瓦片化模型，而不是把点全塞进一个 SimpleMeshLayer。

引用本文

经纬志（2026）。《SimpleMeshLayer》。https://www.jingweizhi.com/deckgl/api/simple-mesh-layer.html（访问日期 2026-11-03）。