Mapbox 3D地形中添加GLTF模型不显示及高度调整问题咨询

一、先确认模型是否成功加载 #

• 打开浏览器开发者工具（F12），切到Network面板，过滤gltf/glb后缀，刷新页面查看模型请求是否返回200状态码。若请求失败，检查模型路径是否正确、跨域配置是否到位。
• 查看Console面板，是否存在加载或渲染报错（比如格式不兼容、材质解析失败等）。

二、解决地形遮挡问题（调整模型高度） #

如果确认模型已加载但被地形遮挡，可通过两种方式调整高度：

1. 修改GeoJSON坐标的高度值 #

在模型的GeoJSON数据源中，给点坐标的第三个参数（高度）添加偏移量，单位为米：

map.addSource('3d-model', {
  type: 'geojson',
  data: {
    type: 'FeatureCollection',
    features: [{
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [经度值, 纬度值, 50] // 第三个值为高度偏移，这里设置抬升50米
      }
    }]
  }
});

2. 通过图层属性设置高度偏移 #

在添加3D模型图层时，利用paint属性的model-translate设置Z轴偏移：

map.addLayer({
  id: '3d-model-layer',
  type: 'custom',
  renderingMode: '3d',
  source: '3d-model',
  paint: {
    'model-translate': [0, 0, 50] // [X偏移, Y偏移, Z偏移]，Z轴控制高度抬升
  },
  // 自定义图层的其余渲染逻辑...
});

三、额外排查项 #

• 检查模型锚点：部分GLTF模型的原点不在底部，可能导致模型陷入地形。可通过Blender等工具将模型原点调整至底部，或通过model-translate进一步补偿偏移。
• 调整图层顺序：确保3D模型图层在地形图层之后加载，若已加载可通过map.moveLayer('3d-model-layer', '地形图层ID')调整层级，避免被地形遮挡。

内容的提问来源于stack exchange，提问作者medim