Comment s'assurer que le bas d'un objet 3D est fixé sur la carte à l'aide de Mapbox et Three.js dans Vue?

Mapbox et trois.js dans Vue: implémentation de l'adaptation parfaite des modèles 3D et des perspectives de cartes

Cet article examine comment synchroniser le modèle tridimensionnel avec l'angle de visualisation de la carte dans l'application Vue.js, combinant Mapbox GL JS et Three.js, pour s'assurer que le bas du modèle est toujours fixé sur la surface de la carte et ne sera pas décalé en raison des modifications des angles de vision. Ceci est crucial dans la construction de systèmes d'information géographique ou d'applications de visualisation de cartes 3D.

Supposons que vous ayez réussi le cube 3D à la carte de la mapbox, mais la position du cube dérive lorsque l'angle de vision se déplace. Le problème réside dans la conversion du système de coordonnées Three.js et du système de coordonnées de carte Mapbox et du réglage de la position du modèle.

L'extrait de code suivant montre une éventuelle structure de code problématique, où render met à jour la matrice de l'appareil photo trois.js et calculatemodeltransform effectue une conversion de coordonnées:

 rendu: (gl, matrice) => {
  const m = new Three.Matrix4 (). FromArray (matrice);
  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));
  CUSTUCHLAYER.CAMERA.PRORIFFERMATRIX = M.Multiply (L);
  CustomLlayer.Renderer.ResetState ();
  CustomLlayer.Renderrer.Render (CustomLlayer.Scene, CustomAyer.Camera);
  CustomAyer.map.triggerrepaint ();
},

CalculateModelTransform (point) {
  const ModeMasmercatorCoOrNinate = mapboxgl.mercatorcoordinate.fromlnglat ([Point.lng, Point.lat], this.Modelaltitude);
  retour {
    Translatex: ModeMasMercatorCoOrnide.x,
    Translatey: ModeMasmercatorcoordinate.y,
    Translatez: ModeMasMercatorCoOrnide.z,
    rotatex: this.modelrotate [0],
    Rotatey: this.modelrotate [1],
    rotatez: this.modelrotate [2],
    Échelle: ModeMasmercatorCoordinate.MeterinmercatorCoOrnideUnits ()
  };
}

Le problème central réside dans translateZ du modèle et la position verticale lorsque le modèle est créé. Nous devons ajuster la position du modèle afin que son fond soit précisément aligné avec le plan de carte.

Solution:

1. Réglage de la création du modèle: Lors de la création d'un modèle trois.js, considérez la hauteur du modèle et ajustez sa position verticale (axe y) afin que son fond soit situé dans le plan de la carte (généralement y = 0).

 // Créer une géométrie du cube, l'altitude est la géométrie constante de hauteur du modèle = new Three.boxgeométrie (20, altitude, 20);
const Material = new Three.MeshstandardMaterial ({Color, transparent: true, opacité: 0,8});
const cube = new Three.Mesh (géométrie, matériel);

// Étapes de clé: Placez le bas du cube sur le plan du plan de carte.position.y = altitude / 2;

2. render : dans la fonction render , ajustez translateZ en fonction de la hauteur du modèle pour vous assurer que le bas du modèle est toujours aligné avec le plan de carte.

 const l = new Three.Matrix4 (). Maketranslation (ModelTransform.Translatex, ModelTransform.Translatey, ModelTransform.Translatez - Altitude / 2)
  .Scale (new Three.Vector3 (ModelTransform.Scale, -ModelTransform.Scale, ModelTransform.Scale))
  // ... autre matrice de transformation

Grâce aux ajustements ci-dessus, même si l'angle de vue de la carte change, le bas du modèle tridimensionnel restera sur la surface de la carte, atteignant une adaptation d'angle de vision parfaite. Assurez-vous que la variable altitude reflète correctement la hauteur du modèle. Si nécessaire, la position verticale peut être encore affinée en fonction de la géométrie réelle du modèle.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!