Mapbox上Threebox问题：低相机俯仰角下3D模型消失

针对Mapbox globe投影下Threebox模型在低俯仰角消失的问题，可从以下几个方向解决：

• 提升模型海拔并调整锚点
  球面投影下，低俯仰角时模型容易被地球曲面遮挡，提升海拔能让模型突出球面，同时设置合适的锚点避免模型陷入地表：

  tb.loadModel('model.glb', function(model) {
    const modelOptions = {
      obj: model,
      type: 'glb',
      coordinates: [116.397, 39.908, 60], // 第三个参数为海拔（米），按需调整
      anchor: 'center' // 将锚点设为模型中心，避免底部埋入球面
    };
    tb.add(modelOptions);
  });
  

• 修改模型的深度测试与渲染顺序
  Mapbox的球面渲染层可能会覆盖Threebox模型，关闭深度测试或提高渲染优先级可确保模型显示在球面之上：

  const addedModel = tb.add(modelOptions);
  // 遍历模型所有子网格，统一修改材质属性
  addedModel.mesh.traverse((child) => {
    if (child.isMesh) {
      child.material.depthTest = false;
      child.renderOrder = 1000; // 更高的渲染顺序优先显示
    }
  });
  

  注意：关闭深度测试可能导致模型重叠时显示异常，若有多个模型需单独调整渲染顺序。

• 调整相机裁剪平面参数
  低俯仰角下，相机的近裁剪平面可能误裁近处模型，动态调整相机的裁剪范围：

  map.on('render', () => {
    const camera = map.getCamera();
    camera.near = 0.1; // 缩小近裁剪距离
    camera.far = 1000000; // 扩大远裁剪范围
    camera.updateProjectionMatrix();
  });
  

• 实时适配球面法线调整模型姿态
  通过回调让模型始终朝向球面外侧，避免因相机角度变化导致模型被球面遮挡：

  const modelOptions = {
    obj: model,
    type: 'glb',
    coordinates: [116.397, 39.908, 30],
    onBeforeRender: (mesh) => {
      const mercCoord = mapboxgl.MercatorCoordinate.fromLngLat([116.397, 39.908], 30);
      const sphereCenter = new THREE.Vector3(0, 0, 0);
      const modelPos = new THREE.Vector3(mercCoord.x, mercCoord.y, mercCoord.z);
      // 计算球面法线，让模型始终向外
      const normal = modelPos.clone().sub(sphereCenter).normalize();
      mesh.up.copy(normal);
    }
  };
  tb.add(modelOptions);
  

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