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

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();
}

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() // 使用墨卡托单位下的米数进行缩放
  };
}