Bagaimana untuk memastikan bahagian bawah objek 3D ditetapkan pada peta menggunakan Mapbox dan Three.js di Vue?

Mapbox dan Three.js di Vue: Melaksanakan penyesuaian sempurna model 3D dan perspektif peta

Artikel ini membincangkan cara menyegerakkan model tiga dimensi dengan sudut tontonan peta dalam aplikasi Vue.js, menggabungkan Mapbox GL JS dan tiga.js, untuk memastikan bahawa bahagian bawah model sentiasa ditetapkan pada permukaan peta dan tidak akan diimbangi kerana perubahan sudut melihat sudut. Ini penting dalam membina sistem maklumat geografi atau aplikasi visualisasi peta 3D.

Katakan anda telah berjaya memberikan kiub 3D ke peta Mapbox, tetapi kedudukan kiub hanyut apabila sudut tontonan bergerak. Masalahnya terletak pada penukaran sistem koordinat tiga.js dan sistem koordinat peta peta dan penetapan kedudukan model.

Coretan kod berikut menunjukkan struktur kod yang bermasalah yang mungkin, di mana fungsi render mengemas kini matriks kamera tiga.js dan fungsi calculatemodeltransform melakukan penukaran koordinat:

 render: (gl, matriks) => {
  const m = new Three.matrix4 (). FROMArray (Matrix);
  const l = new Three.matrix4 (). MaketRanslation (ModelTransform.Translatex, ModelTransform.Translatey, ModelTransform.TranslateZ)
      .scale (three.vector3 baru (ModelTransform.Scale, -ModelTransform.scale, ModelTransform.scale))
      .multiply (three.matrix4 () baru.
      .multiply (three.matrix4 () baru.
      .multiply (three.matrix4 ().
  customLayer.camera.ProjectionMatrix = M.Multiply (l);
  customLayer.Renderer.ResetState ();
  customLayer.renderer.render (customLayer.scene, customLayer.camera);
  customLayer.map.triggerRepaint ();
},

CalculateModelTransform (titik) {
  const ModelAsMerCatorCoordinate = MapBoxGl.MercatorCoordinate.FromLnglat ([point.lng, point.lat], this.modelAltitude);
  kembali {
    Translatex: ModelAsMercatorCoordinate.x,
    Terjemahan: ModelAsMercatorCoordinate.y,
    TranslateZ: ModelAsMercatorCoordinate.z,
    Rotatex: this.modelrotate [0],
    Rotatey: this.modelrotate [1],
    Rotateez: this.modelrotate [2],
    Skala: ModelAsMercatorCoordinate.MeterInmercatorCoordinateUnits ()
  };
}

Masalah teras terletak pada translateZ model dan kedudukan menegak apabila model dibuat. Kita perlu menyesuaikan kedudukan model supaya bahagian bawahnya sejajar dengan satah peta.

Penyelesaian:

1. Pelarasan Penciptaan Model: Apabila mencipta model tiga.js, pertimbangkan ketinggian model dan menyesuaikan kedudukan menegaknya (paksi y) supaya bahagian bawahnya terletak di dalam satah peta (biasanya y = 0).

 // Buat geometri kiub, ketinggian adalah ketinggian model const geometry = three.boxgeometry baru (20, ketinggian, 20);
const material = three.meshstandMaterial baru ({warna, telus: benar, kelegapan: 0.8});
const cube = three.mesh baru (geometri, bahan);

// Langkah -langkah utama: Letakkan bahagian bawah kiub pada peta pesawat cube.position.y = ketinggian / 2;

2. Pelarasan fungsi render : Dalam fungsi render , laraskan nilai translateZ mengikut ketinggian model untuk memastikan bahawa bahagian bawah model sentiasa sejajar dengan satah peta.

 const l = new Three.matrix4 (). Maketranslation (ModelTransform.Translatex, ModelTransform.Translatey, ModelTransform.Translatez - ketinggian / 2)
  .scale (three.vector3 baru (ModelTransform.Scale, -ModelTransform.scale, ModelTransform.scale))
  // ... matriks transformasi lain

Melalui pelarasan di atas, walaupun perubahan sudut pandangan peta, bahagian bawah model tiga dimensi akan kekal di permukaan peta, mencapai penyesuaian sudut tontonan yang sempurna. Pastikan pemboleh ubah altitude dengan betul mencerminkan ketinggian model. Sekiranya perlu, kedudukan menegak boleh disesuaikan dengan lebih baik mengikut geometri sebenar model.

Atas ialah kandungan terperinci Bagaimana untuk memastikan bahagian bawah objek 3D ditetapkan pada peta menggunakan Mapbox dan Three.js di Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!