Wie kann ich sicherstellen, dass der Boden eines 3D -Objekts mit MAPBox und drei.js in Vue auf der Karte fixiert wird?

Mapbox und drei.Js in Vue: Implementierung der perfekten Anpassung von 3D -Modellen und Kartenperspektiven

In diesem Artikel wird erläutert, wie das dreidimensionale Modell mit dem Kartenbeobachtungswinkel in Vue.js-Anwendung synchronisiert werden kann, wobei die MAPBox-GL JS und drei.Js kombiniert werden, um sicherzustellen, dass der Boden des Modells immer auf der Kartenoberfläche befestigt ist und aufgrund von Änderungen der Anzeigewinkel nicht veraltet ist. Dies ist entscheidend für den Aufbau geografischer Informationssysteme oder 3D -Kartenvisualisierungsanwendungen.

Angenommen, Sie haben den 3D -Würfel erfolgreich auf die Mapbox -Karte gebracht, aber die Cube -Position driftet, wenn sich der Betrachtungswinkel bewegt. Das Problem liegt in der Umwandlung des drei.js -Koordinatensystems und des MAPBox -Kartenkoordinatensystems und der Einstellung der Modellposition.

Das folgende Code -Snippet zeigt eine mögliche problematische Codestruktur, in der render die drei.js -Kamera -Matrix aktualisiert und calculatemodeltransform eine Koordinatenkonvertierung ausführt:

 Render: (GL, Matrix) => {
  const m = new Three.matrix4 (). FromArray (Matrix);
  const l = new Three.matrix4 ().
      .Scale (new Three.Vector3 (modeltransform.scale, -modeltransform.scale, modeltransform.scale))
      .multiply (neue drei.matrix4 ().
      .multiply (neue drei.matrix4 ().
      .multiply (neue drei.matrix4 ().
  CustomLayer.Camera.ProjectionMatrix = m.multiply (l);
  CustomLayer.Renderer.ResetState ();
  CustomLayer.Renderer.render (CustomLayer.scene, CustomLayer.Camera);
  CustomLayer.map.TiggerRepaint ();
},

Calculatemodeltransform (Punkt) {
  const modelasercatorCoordinate = mapBoxgl.MercatorCoordinate.fromlnglat ([point.lng, point.lat], this.modelaltitude);
  zurückkehren {
    translatex: model mercatorCoordinate.x,
    Translatey: ModellaMercatorCoordinate.y,,
    translatez: model mercatorCoordinate.z,
    rotatex: this.modelRotate [0],
    rotatey: this.modelrotate [1],
    rotatez: this.modelrotate [2],
    Skala: ModellaMercatorCoordinat.MeterinmerCatorCoordinateUnits ()
  };
}

Das Kernproblem liegt in translateZ des Modells und in der vertikalen Position, wenn das Modell erstellt wird. Wir müssen die Position des Modells so einstellen, dass der Boden genau mit der Kartenebene ausgerichtet ist.

Lösung:

1. Einstellung der Modellerstellung: Betrachten Sie beim Erstellen eines Drei.JS-Modells die Modellhöhe und passen Sie die vertikale Position (y-Achse) an, damit sich der Boden in der Kartenebene befindet (normalerweise y = 0).

 // Erstellen einer Würfelgeometrie, Höhe ist die Modellhöhe const Geometrie = new Three.boxgeometry (20, Höhe, 20);
const materials = new Three.MeshStandardMaterial ({Farbe, transparent: true, opacity: 0.8});
const cube = new Three.mesh (Geometrie, Material);

// Schlüsselschritte: Platzieren Sie den Boden des Würfels auf der Kartenebene.

2. render Einstellung der Renderfunktion: Passen Sie in der render translateZ -Wert entsprechend der Modellhöhe an, um sicherzustellen, dass der Boden des Modells immer mit der Kartenebene ausgerichtet ist.

 const l = new Three.matrix4 ().
  .Scale (new Three.Vector3 (modeltransform.scale, -modeltransform.scale, modeltransform.scale))
  // ... andere Transformationsmatrix

Durch die obigen Anpassungen bleibt auch wenn sich der Kartenansichtswinkel ändert, der Boden des dreidimensionalen Modells auf der Kartenoberfläche und erreicht die Anpassung des perfekten Betrachtungswinkels. Stellen Sie sicher, dass die altitude die Höhe des Modells korrekt widerspiegelt. Bei Bedarf kann die vertikale Position gemäß der tatsächlichen Geometrie des Modells weiter abgestimmt werden.

Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass der Boden eines 3D -Objekts mit MAPBox und drei.js in Vue auf der Karte fixiert wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!