Apabila Vue dan Mapbox menggabungkan tiga.js, bagaimana anda memastikan bahawa bahagian bawah objek 3D ditetapkan pada peta tanpa berubah dengan perspektif?

Melaksanakan penyegerakan sempurna model 3D dan tontonan peta di Vue, Mapbox dan Three.js

Artikel ini membincangkan cara menggabungkan Mapbox GL JS dan tiga.js dalam aplikasi Vue.js untuk mencapai kesan menjaga bahagian bawah tetap pada peta apabila sudut pandangan peta berubah. Ini penting untuk membina aplikasi visualisasi 3D berdasarkan geolokasi.

Cabaran: Perubahan Perspektif Menyebabkan Peralihan Model

Masalah biasa apabila melapisi tiga.js model pada peta mapbox adalah bahawa apabila anda menyeret atau mengezum peta, bahagian bawah model diimbangi dan bukannya tetap tetap pada koordinat peta. Ini berbeza daripada menggunakan model GLTF secara langsung, yang biasanya lebih baik mengekalkan kedudukan relatif ke peta.

Penyelesaian: Transformasi koordinat yang tepat dan kedudukan model

Menyelesaikan masalah ini memerlukan transformasi koordinat dan strategi kedudukan model yang tepat. Langkah -langkah dan contoh kod berikut akan membantu anda mencapai matlamat anda:

1. Ketepatan Penukaran Sistem Penyelarasan: Pastikan fungsi penukaran koordinat anda (seperti calculatemodeltransform ) dengan betul menukarkan koordinat model 3D ke sistem koordinat unjuran Mercator yang digunakan oleh MAPBOX.

2. Pelarasan kedudukan model dan penskalaan: Kuncinya adalah untuk menyesuaikan kedudukan dan skala model tiga.js supaya bahagian bawahnya selalu sesuai dengan koordinat peta. Coretan kod berikut menunjukkan cara mengubah fungsi createcustomlayer :

 CreateCustomLayer (Indeks, Point, ModelTransform) {
  biarkan warna;
  biarkan ketinggian;

  // Tetapkan warna dan ketinggian mengikut nilai PM2.5 (dengan asumsi logik ini sudah ada)
  // ...

  const customLayer = {
    Id: `Layer Custom-$ {Index}`,
    Taip: 'Custom',
    RenderingMode: '3d',
    onAdd: (peta, gl) => {
      Console.log (`Lapisan Custom Ditambah: $ {CustomLayer.ID}`);
      customLayer.camera = new Three.camera ();
      customLayer.scene = new Three.scene ();
      // Tambah cahaya (cahaya ambien dan arah)
      // ... (dengan asumsi logik ini sudah ada)

      const geometry = three.boxgeometry baru (20, ketinggian, 20); // Laraskan saiz const material = three.meshstandMaterial baru ({{
        Warna: Warna,
        Telus: Benar,
        Opacity: 0.8
      });
      const cube = three.mesh baru (geometri, bahan);

      // Tambahkan garis kontur (dengan asumsi logik ini sudah ada)
      // ...

      // ** Langkah -langkah utama: Laraskan kedudukan model supaya bahagian bawahnya tetap ke peta **
      cube.position.set (0, ketinggian / 2, 0); // Bahagian bawah terletak di (0,0,0)

      customLayer.scene.add (Cube);
      customLayer.map = peta;
      customLayer.Renderer = new Three.WebGlRenderer ({
        kanvas: peta.getCanvas (),
        Konteks: GL,
        Antialias: Benar
      });
      customLayer.renderer.autoclear = false;
    },
    render: (gl, matriks) => {
      Console.log (`Rendering Layer Custom: $ {CustomLayer.ID}`);
      const m = new Three.matrix4 (). FROMArray (Matrix);
      // ... (pengiraan matriks transformasi model, dengan asumsi logik ini sudah ada)
      customLayer.camera.ProjectionMatrix = M.Multiply (l);
      customLayer.Renderer.ResetState ();
      customLayer.renderer.render (customLayer.scene, customLayer.camera);
      customLayer.map.triggerRepaint ();
    }
  };
  kembali customlayer;
}

Dalam kod, cube.position.set(0, altitude / 2, 0); Pastikan bahagian bawah kiub berada di (0,0,0), dan kemudian menyesuaikan ketinggian mengikut altitude . Ini membolehkan bahagian bawah model sentiasa selari dengan asal sistem koordinat peta.

3. Ujian dan Fine-Tune: Setelah melengkapkan pengubahsuaian kod, uji aplikasi anda dan sahkan bahawa bahagian bawah model sentiasa ditetapkan pada peta dengan menyeret dan mengezum peta. Ia mungkin perlu disempurnakan berdasarkan struktur koordinat khusus dan struktur model anda.

Melalui langkah-langkah di atas, anda dapat menyelesaikan masalah model tiga.js yang diimbangi dengan berkesan apabila perubahan sudut pandangan peta, dengan itu membina aplikasi visualisasi maklumat geografi tiga dimensi yang lebih stabil dan tepat. Ingat, kunci terletak pada transformasi koordinat yang tepat dan pelarasan kedudukan relatif model.

Atas ialah kandungan terperinci Apabila Vue dan Mapbox menggabungkan tiga.js, bagaimana anda memastikan bahawa bahagian bawah objek 3D ditetapkan pada peta tanpa berubah dengan perspektif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!