Mapbox and Three.js in Vue: Implementing the perfect adaptation of 3D models and map perspectives

This article discusses how to synchronize the three-dimensional model with map viewing angle in Vue.js application, combining Mapbox GL JS and Three.js, to ensure that the bottom of the model is always fixed on the map surface and will not be offset due to changes in viewing angles. This is crucial in building geographic information systems or 3D map visualization applications.

Suppose you have successfully rendered the 3D cube to the Mapbox map, but the cube position drifts when the viewing angle moves. The problem lies in the conversion of the Three.js coordinate system and the Mapbox map coordinate system and the setting of model position.

The following code snippet shows a possible problematic code structure, where render function updates the Three.js camera matrix and calculatemodeltransform function performs coordinate conversion:

 render: (gl, matrix) => {
  const m = new THREE.Matrix4().fromArray(matrix);
  const l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ)
      .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
      .multiply(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX))
      .multiply(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY))
      .multiply(new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ));
  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: modelAsMercatorCoordinate.z,
    rotateX: this.modelRotate[0],
    rotateY: this.modelRotate[1],
    rotateZ: this.modelRotate[2],
    scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
  };
}

The core problem lies in translateZ of the model and the vertical position when the model is created. We need to adjust the position of the model so that its bottom is precisely aligned with the map plane.

Solution:

1. Model creation adjustment: When creating a Three.js model, consider the model height and adjust its vertical position (y-axis) so that its bottom is located in the map plane (usually y=0).

 // Create a cube geometry, altitude is the model height const geometry = new THREE.BoxGeometry(20, altitude, 20);
const material = new THREE.MeshStandardMaterial({ color, transparent: true, opacity: 0.8 });
const cube = new THREE.Mesh(geometry, material);

// Key steps: Place the bottom of the cube on the map plane cube.position.y = altitude / 2;

2. render function adjustment: In the render function, adjust translateZ value according to the model height to ensure that the bottom of the model is always aligned with the map plane.

 const l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ - altitude / 2)
  .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale))
  // ...Other transformation matrix

Through the above adjustments, even if the map view angle changes, the bottom of the three-dimensional model will remain on the map surface, achieving perfect viewing angle adaptation. Make sure the altitude variable correctly reflects the height of the model. If necessary, the vertical position can be further fine-tuned according to the actual geometry of the model.

The above is the detailed content of How to make sure the bottom of a 3D object is fixed on the map using Mapbox and Three.js in Vue?. For more information, please follow other related articles on the PHP Chinese website!