基于投影矩阵与地理参考对象的Mapbox/Maplibre射线投射问题

核心思路 #

解决大坐标精度丢失必须将场景平移至Three.js世界中心，但需同步调整相机变换与Raycaster的计算逻辑，确保渲染精度与射线投射同时正常工作。最优方案是通过父组统一管理坐标偏移，而非修改每个几何体的顶点数据，同时正确同步相机位置与投影矩阵。

具体实现步骤 #

1. 用Group统一管理地理参考物体 #

创建一个父Group承载所有地理线条，通过修改Group的位置实现场景整体平移，避免重复修改几何体顶点，提升性能：

// 初始化时创建父组
this.geometryGroup = new THREE.Group();
this.scene.add(this.geometryGroup);

// 创建地理线条时直接使用原始Mercator坐标，无需偏移
lines.forEach((points) => { 
  const geometry = new THREE.BufferGeometry().setFromPoints(points.map(({lng, lat, elev}) => {
    const { x, y, z } = MercatorCoordinate.fromLngLat([lng, lat], elev);
    return new THREE.Vector3(x, y, z);
  }));
  const line = new THREE.Line(geometry, material);
  this.geometryGroup.add(line);
});

2. 动态更新场景偏移与相机位置 #

当地图中心变化（如拖动地图）时，更新父Group的位置以将场景锚定到世界中心，同时同步相机位置抵消偏移：

function updateSceneOffset() {
  // 获取当前地图中心的Mercator坐标
  const center = MercatorCoordinate.fromLngLat(map.getCenter(), 0);
  // 将父组平移，使地图中心对齐Three.js世界中心
  this.geometryGroup.position.set(-center.x, -center.y, -center.z);
  
  // 更新相机位置为地图中心坐标，抵消场景平移
  this.camera.position.set(center.x, center.y, center.z);
  // 强制更新相机世界矩阵，确保视图正确
  this.camera.updateMatrixWorld();
}

// 绑定地图移动事件，实时更新偏移
map.on('move', updateSceneOffset.bind(this));

3. 同步相机投影矩阵 #

在地图渲染回调中，直接使用地图提供的相机投影矩阵，确保Three.js相机与地图视角完全匹配：

function onMapRenderFrame() {
  // 获取地图的相机投影矩阵
  const cameraMatrix = map.getCameraMatrix();
  this.camera.projectionMatrix.fromArray(cameraMatrix);
  
  this.renderer.render(this.scene, this.camera);
  requestAnimationFrame(onMapRenderFrame.bind(this));
}

4. 正常使用Raycaster进行射线检测 #

由于父Group的变换会被Three.js的Raycaster自动识别（默认intersectObjects会递归计算父对象的矩阵变换），无需额外修改射线逻辑。若需获取选中点的真实地理坐标，只需将交点坐标反向加上偏移：

function onMouseClick(event) {
  const mouse = new THREE.Vector2(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1
  );
  
  this.raycaster.setFromCamera(mouse, this.camera);
  // 检测场景中的线条对象
  const intersects = this.raycaster.intersectObjects(this.geometryGroup.children);
  
  if (intersects.length > 0) {
    // 获取交点的世界坐标（自动包含父Group的偏移）
    const worldPoint = intersects[0].point;
    // 转换为Mercator坐标后再转经纬度
    const mercatorCoord = new MercatorCoordinate(worldPoint.x, worldPoint.y, worldPoint.z);
    const [lng, lat] = mercatorCoord.toLngLat();
    const elev = worldPoint.z;
    
    console.log('选中点地理坐标:', lng, lat, elev);
  }
}

关键注意事项 #

• 不要直接修改相机的matrix或matrixWorld，通过设置position并调用updateMatrixWorld()让Three.js自动维护矩阵，避免矩阵不同步导致的渲染/射线错误。
• 地图中心变化时仅需更新父Group的位置，无需重建几何体，大幅提升交互流畅度。
• Raycaster默认会处理嵌套对象的变换，因此无需手动调整射线原点或方向，直接使用setFromCamera即可。

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