转换场景坐标而非相机坐标时ThreeJS+Mapbox渲染错乱问题

看起来你在Mapbox和ThreeJS集成时踩了一个很常见的精度坑——我帮你梳理下问题根源和修复方案：

核心问题分析 #

你的思路（提前转换模型坐标，仅同步相机）本身是合理的，但两个关键细节出错导致了渲染问题：

• 大坐标精度丢失：Web墨卡托坐标系的数值量级在千万级（比如MercatorCoordinate.fromLngLat返回的x/y值通常在±2e7左右），而ThreeJS默认使用float32浮点数，处理这么大的数值时，小数部分的精度会严重丢失，直接导致模型顶点位置出现抖动和偏移。
• 相机矩阵同步错误：你直接把Mapbox提供的matrix赋值给ThreeJS相机的projectionMatrix，但这个matrix其实是view-projection矩阵（视图矩阵×投影矩阵），不是单纯的投影矩阵，错误的矩阵处理会导致渲染空间错乱。

分步修复方案 #

1. 改用局部坐标系避免精度丢失 #

不要直接把模型放在墨卡托的大坐标上，而是将模型原点设为(0,0,0)，通过相机的位置偏移来匹配Mapbox的坐标。这样模型的顶点都是小数值，不会出现精度问题：

// 加载GLTF时修改模型定位逻辑
new THREE.GLTFLoader()
  .load(modelPath, gltf => {
    // 模型原点设为局部坐标系原点，避免大坐标精度问题
    gltf.scene.position.set(0, 0, 0);
    gltf.scene.setRotationFromEuler(new THREE.Euler().fromArray(orientation));
    gltf.scene.scale.copy(scaleVector);
    this.scene.add(gltf.scene);

    // 保存模型的世界偏移量，后续用于相机调整
    this.modelOffset = new THREE.Vector3(coords.x, coords.y, coords.z);

    // 包围盒调试代码保留
    const bbox = new THREE.Box3().setFromObject(gltf.scene);
    console.log(bbox);
    this.scene.add(new THREE.Box3Helper(bbox, 'blue'));
  });

2. 正确同步相机矩阵 #

Mapbox在render回调中提供的matrix是完整的view-projection矩阵，你需要结合模型的偏移量来调整相机的矩阵状态：

render: function(gl, matrix) {
  // 将Mapbox的矩阵转换为ThreeJS格式
  const mapViewProjectionMatrix = new THREE.Matrix4().fromArray(matrix);
  
  // 计算相机的世界逆矩阵：抵消模型的世界偏移
  this.camera.matrixWorldInverse.copy(
    new THREE.Matrix4().makeTranslation(
      -this.modelOffset.x, 
      -this.modelOffset.y, 
      -this.modelOffset.z
    ).multiply(mapViewProjectionMatrix)
  );
  this.camera.projectionMatrix.copy(mapViewProjectionMatrix);
  this.camera.updateMatrixWorld(true);

  this.renderer.state.reset();
  this.renderer.render(this.scene, this.camera);
}

3. 修正坐标系翻转问题 #

Mapbox的墨卡托坐标系是y轴向北（屏幕向上），ThreeJS默认是y轴向上（3D空间向上），你之前的-modelTransform.scale可能导致了不必要的坐标系翻转。建议统一缩放方向，如需翻转模型，单独调整旋转即可：

// 调整缩放向量，移除y轴的负号
const scaleVector = new THREE.Vector3(modelTransform.scale, modelTransform.scale, modelTransform.scale);
// 如果模型确实需要y轴翻转，调整rotation：
// gltf.scene.rotation.x = Math.PI;

4. 可选：启用高精度渲染 #

如果你的场景对精度要求极高，可以在创建渲染器时启用高精度浮点数：

function newRenderer(map, gl) {
  const renderer = new THREE.WebGLRenderer({
    canvas: map.getCanvas(),
    context: gl,
    antialias: true,
    precision: 'highp' // 启用高精度模式
  });
  renderer.autoClear = false;
  return renderer;
}

为什么放大模型能看到轮廓？ #

当你把模型放大100倍后，顶点的相对位置被放大，掩盖了部分精度丢失的问题，所以能识别出轮廓，但底层的精度误差依然存在，因此还是会有glitch。

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