在Mapbox中加载3D模型与地形后模型消失的技术问题求助

核心原因 #

地形加载完成后，目标位置的地面高程会高于你设置的模型初始海拔（modelAltitude = 0），导致模型被地形完全遮挡；同时地形启用后Mapbox的WebGL深度测试逻辑变化，进一步加剧了这个显示问题。

解决方案 #

方案1：手动抬高模型海拔 #

直接将模型的初始海拔设为大于0的固定值，确保模型悬浮在地形之上：

function loadModel(fragGroup: any) {
    const modelOrigin: [number, number] = [76.9558, 11.0168];
    const modelAltitude = 10; // 从0改为10，可根据实际地形高度调整
    const modelRotate = [Math.PI / 2, 0, 0];

    // 其余代码保持不变
}

方案2：动态匹配地形高程（推荐） #

通过Mapbox API获取目标位置的真实地形高程，将模型海拔设置为「地形高程+偏移值」，确保模型始终悬浮在地形表面：

async function loadTerrain() {
    const map = mapRef.current?.getMap();
    if (!map) return;

    map.addSource("mapbox-dem", {
      type: "raster-dem",
      url: "mapbox://mapbox-terrain-dem-v1",
      tileSize: 512,
    });

    map.setTerrain({ source: "mapbox-dem", exaggeration: 1.5 });

    // 等待地形加载完成事件触发
    await new Promise(resolve => map.on("terrain", resolve));

    const modelOrigin = [76.9558, 11.0168];
    // 获取目标位置的地形高程
    const terrainElevation = map.queryTerrainElevation(modelOrigin) || 0;
    // 加载模型时传入「高程+偏移值」（比如5米，避免贴地）
    loadModel(terrainElevation + 5);
}

// 修改loadModel函数，接收动态海拔参数
function loadModel(modelAltitude: number = 0) {
    const modelOrigin: [number, number] = [76.9558, 11.0168];
    const modelRotate = [Math.PI / 2, 0, 0];

    const modelAsMercatorCoordinate = MercatorCoordinate.fromLngLat(
      modelOrigin,
      modelAltitude
    );

    // 其余代码保持不变
}

方案3：修正WebGL深度测试配置 #

在自定义图层的onAdd方法中添加深度测试配置，避免渲染顺序冲突：

onAdd: function (map: any, gl: any) {
    // 原有灯光、场景初始化代码...

    // 添加深度测试配置
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

    this.renderer = new THREE.WebGLRenderer({
      canvas: map.getCanvas(),
      context: gl,
      antialias: true,
      depth: true, // 确保启用深度缓冲区
    });

    this.renderer.autoClear = false;
},

额外注意事项 #

• 如果模型仍显示异常，可调整图层添加顺序，确保自定义图层在地形相关图层之后渲染：

  mapRef.current?.getMap().addLayer(customLayer, "terrain");
  

• 若使用了地形高程夸张（exaggeration），模型的偏移值也需要对应放大，保证视觉上的悬浮效果一致。

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