在Vue中使用Mapbox和Three.js时，如何确保三维物体的坐标点与地图视角一致？-js教程-PHP中文网

在Vue中使用Mapbox和Three.js时，如何确保三维物体的坐标点与地图视角一致？

DDD

发布： 2025-03-18 09:22:20

原创

471人浏览过

Vue中Mapbox和Three.js三维物体坐标与地图视角同步

本文解决在vue项目中使用mapbox和three.js渲染三维物体时，拖动地图视角导致物体底部偏移的问题。目标是确保三维物体始终固定在指定的地图坐标位置。

在Vue中使用Mapbox和Three.js时，如何确保三维物体的坐标点与地图视角一致？

问题描述：

三维物体成功渲染在Mapbox地图上，但拖动地图时，物体底部会发生偏移，不再保持在初始经纬度位置。

解决方案：

立即学习“前端免费学习笔记（深入）”；

核心在于同步Three.js场景矩阵和Mapbox视图矩阵。需要修正物体位置，使其与Mapbox的墨卡托投影坐标系匹配，并考虑视角变化对三维物体投影的影响。

代码调整：

千面视频动捕

千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

查看详情

以下代码片段展示了render函数和calculateModelTransform函数的修改：

1. 调整render函数：

使用mapboxgl.MercatorCoordinate设置物体位置，并考虑地图视角变化。

render: (gl, matrix) => {
  console.log(`custom layer rendering: ${customlayer.id}`);

  const m = new THREE.Matrix4().fromArray(matrix);

  // 使用墨卡托坐标系的位置
  const modelPosition = mapboxgl.MercatorCoordinate.fromLngLat([point.lng, point.lat], this.modelAltitude);

  const l = new THREE.Matrix4().makeTranslation(modelPosition.x, modelPosition.y, modelPosition.z)
      .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)) // 注意Y轴缩放的负号
      .multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(this.modelRotate[0], this.modelRotate[1], this.modelRotate[2])));

  customLayer.camera.projectionMatrix = m.multiply(l);
  customLayer.renderer.resetState();
  customLayer.renderer.render(customLayer.scene, customLayer.camera);
  customLayer.map.triggerRepaint();
}

登录后复制

2. 调整calculateModelTransform函数：

translateZ参数设为0，确保物体底部固定在地图上。同时，使用meterInMercatorCoordinateUnits()获取合适的缩放比例。

calculateModelTransform(point) {
  const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat([point.lng, point.lat], this.modelAltitude);
  return {
    translateX: modelAsMercatorCoordinate.x,
    translateY: modelAsMercatorCoordinate.y,
    translateZ: 0, // 物体底部固定
    rotateX: this.modelRotate[0],
    rotateY: this.modelRotate[1],
    rotateZ: this.modelRotate[2],
    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits() // 使用墨卡托单位下的米数进行缩放
  };
}

登录后复制

通过以上调整，三维物体底部将始终固定在预设的经纬度位置，无论地图视角如何变化。请注意代码中THREE和mapboxgl的正确引用。 Y轴缩放的负号确保物体方向正确。使用meterInMercatorCoordinateUnits()可以更准确地控制缩放比例，使其与地图比例一致。

以上就是在Vue中使用Mapbox和Three.js时，如何确保三维物体的坐标点与地图视角一致？的详细内容，更多请关注php中文网其它相关文章！