Implement perfect synchronization of 3D models and map viewing in Vue, Mapbox and Three.js

This article discusses how to combine Mapbox GL JS and Three.js in Vue.js application to achieve the effect of keeping the bottom fixed on the map when the map view angle changes. This is crucial for building 3D visualization applications based on geolocation.

Challenge: Change in perspective causes model shift

A common problem when overlaying Three.js models on Mapbox maps is that when you drag or zoom the map, the bottom of the model is offset instead of staying fixed on the map coordinates. This is different from using glTF models directly, which usually better maintain relative position to the map.

Solution: Accurate coordinate transformation and model positioning

Solving this problem requires precise coordinate transformation and model positioning strategies. The following steps and code examples will help you achieve your goals:

1. Correctness of coordinate system conversion: Make sure your coordinate conversion function (such as calculatemodeltransform ) correctly converts the 3D model coordinates to the Mercator projection coordinate system used by Mapbox.

2. Adjustment of model position and scaling: The key is to adjust the position and scaling of the Three.js model so that its bottom always corresponds to the map coordinates. The following code snippet shows how to modify the createcustomlayer function:

 createCustomLayer(index, point, modelTransform) {
  let color;
  let altitude;

  // Set the color and height according to the PM2.5 value (assuming this logic already exists)
  // ...

  const customLayer = {
    id: `custom-layer-${index}`,
    type: 'custom',
    renderingMode: '3d',
    onAdd: (map, gl) => {
      console.log(`Custom layer added: ${customLayer.id}`);
      customLayer.camera = new THREE.Camera();
      customLayer.scene = new THREE.Scene();
      // Add light (ambient and directional light)
      // ... (assuming this logic already exists)

      const geometry = new THREE.BoxGeometry(20, altitude, 20); // Adjust the size const material = new THREE.MeshStandardMaterial({
        color: color,
        transparent: true,
        opacity: 0.8
      });
      const cube = new THREE.Mesh(geometry, material);

      // Add contour lines (assuming this logic already exists)
      // ...

      // **Key steps: Adjust the position of the model so that the bottom of it is fixed to the map**
      cube.position.set(0, altitude / 2, 0); //The bottom is located at (0,0,0)

      customLayer.scene.add(cube);
      customLayer.map = map;
      customLayer.renderer = new THREE.WebGLRenderer({
        canvas: map.getCanvas(),
        context: gl,
        antialias: true
      });
      customLayer.renderer.autoClear = false;
    },
    render: (gl, matrix) => {
      console.log(`Custom layer rendering: ${customLayer.id}`);
      const m = new THREE.Matrix4().fromArray(matrix);
      // ... (Computation of the model transformation matrix, assuming this logic already exists)
      customLayer.camera.projectionMatrix = m.multiply(l);
      customLayer.renderer.resetState();
      customLayer.renderer.render(customLayer.scene, customLayer.camera);
      customLayer.map.triggerRepaint();
    }
  };
  return customLayer;
}

In the code, cube.position.set(0, altitude / 2, 0); make sure the bottom of the cube is at (0,0,0), and then adjust the height according to altitude . This allows the bottom of the model to always align with the map coordinate system origin.

3. Test and fine-tune: After completing the code modification, test your application and verify that the bottom of the model is always fixed on the map by dragging and zooming the map. It may need to be fine-tuned based on your specific coordinate transformation and model structure.

Through the above steps, you can effectively solve the problem of the Three.js model offset when the map view angle changes, thereby building a more stable and accurate three-dimensional geographic information visualization application. Remember, the key lies in precise coordinate transformation and relative position adjustment of the model.

The above is the detailed content of When Vue and Mapbox combine Three.js, how do you ensure that the bottom of a 3D object is fixed on the map without changing with the perspective?. For more information, please follow other related articles on the PHP Chinese website!