


Bagaimana untuk memastikan bahagian bawah objek 3D ditetapkan pada peta menggunakan Mapbox dan Three.js di Vue?
Apr 04, 2025 pm 06:42 PMMapbox 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:
- 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;
- Pelarasan fungsi
render
: Dalam fungsirender
, laraskan nilaitranslateZ
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!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Sepuluh platform pasaran cryptocurrency yang berwibawa dan analisis data pada tahun 2025 adalah: 1. CoinMarketCap, menyediakan kedudukan permodalan pasaran yang komprehensif dan data pasaran asas; 2. Coingecko, menyediakan penilaian projek pelbagai dimensi dengan skor kemerdekaan dan amanah; 3. TradingView, mempunyai carta k-line yang paling profesional dan alat analisis teknikal; 4. Binance Market, menyediakan data masa nyata yang paling langsung sebagai pertukaran terbesar; 5. Pasar Ouyi, menonjolkan penunjuk derivatif utama seperti jumlah kedudukan dan kadar modal; 6. Glassnode, memberi tumpuan kepada data rantaian seperti alamat aktif dan trend ikan paus gergasi; 7. Messari, menyediakan laporan penyelidikan peringkat institusi dan data standard yang ketat; 8. Cryptocompa

Alat yang paling sesuai untuk menanyakan pasaran stablecoin pada tahun 2025 adalah: 1. Binance, dengan data berwibawa dan pasangan perdagangan yang kaya, dan carta perdagangan bersepadu yang sesuai untuk analisis teknikal; 2. Ouyi, dengan antara muka yang jelas dan integrasi berfungsi yang kuat, dan menyokong operasi sehenti akaun Web3 dan DEFI; 3. Coinmarketcap, dengan banyak mata wang, dan sektor stablecoin dapat melihat kedudukan nilai pasaran dan dekan; 4. Coingecko, dengan dimensi data yang komprehensif, menyediakan skor kepercayaan dan penunjuk aktiviti komuniti, dan mempunyai kedudukan neutral; 5. Huobi (HTX), dengan keadaan pasaran yang stabil dan operasi mesra, sesuai untuk pertanyaan aset arus perdana; 6. Gate.io, dengan koleksi duit syiling baru dan mata wang khusus, dan merupakan pilihan pertama untuk projek -projek untuk meneroka potensi; 7. TRA

Ethereum adalah platform aplikasi yang terdesentralisasi berdasarkan kontrak pintar, dan ETH token asalnya boleh diperolehi dalam pelbagai cara. 1. Daftar akaun melalui platform berpusat seperti Binance dan Ouyiok, pensijilan KYC lengkap dan membeli ETH dengan stablecoins; 2. Sambungkan ke penyimpanan digital melalui platform yang terdesentralisasi, dan secara langsung bertukar ETH dengan stablecoins atau token lain; 3. Mengambil bahagian dalam ikrar rangkaian, dan anda boleh memilih Ikrar Bebas (memerlukan 32 ETH), perkhidmatan ikrar cecair atau ikrar satu klik pada platform terpusat untuk mendapatkan ganjaran; 4. Dapatkan ETH dengan menyediakan perkhidmatan kepada projek Web3, menyelesaikan tugas atau mendapatkan udara. Adalah disyorkan bahawa pemula bermula dari platform terpusat arus perdana, beransur -ansur beralih ke kaedah yang terdesentralisasi, dan selalu melampirkan kepentingan keselamatan aset dan penyelidikan bebas, ke

Penggunaan sebenar Battle Royale dalam sistem mata wang dua belum lagi berlaku. Kesimpulan Pada bulan Ogos 2023, Protokol Pinjaman Ekologi Makerdao memberi pulangan tahunan sebanyak $ DAI8%. Kemudian Sun Chi memasuki kelompok, melabur sejumlah 230,000 $ Steth, menyumbang lebih daripada 15% daripada deposit Spark, memaksa Makerdao membuat cadangan kecemasan untuk menurunkan kadar faedah kepada 5%. Hasrat asal Makerdao adalah untuk "mensubsidi" kadar penggunaan $ dai, hampir menjadi hasil solo Justin Sun. Julai 2025, Ethe

Jadual Kandungan Crypto Market Panoramik Nugget Token Vinevine Popular (114.79%, nilai pasaran bulat sebanyak AS $ 144 juta) Zorazora (16.46%, nilai pasaran pekeliling US $ 290 juta) Navxnaviprotocol (10.36%. dan cryptopunks menduduki tempat pertama dalam rangkaian prover yang terdesentralisasi dengan ringkas melancarkan asas ringkas, yang mungkin menjadi token tGe

StableCoins adalah cryptocurrency dengan nilai yang berlabuh oleh mata wang fiat atau komoditi, yang direka untuk menyelesaikan turun naik harga seperti bitcoin. Kepentingan mereka tercermin dalam peranan mereka sebagai alat lindung nilai, medium perdagangan dan jambatan yang menghubungkan mata wang fiat dengan dunia crypto. 1. Kelebihannya ialah mekanisme itu mudah dan stabil. Kelemahannya ialah mereka bergantung kepada kepercayaan institusi berpusat. Mereka mewakili projek termasuk USDT dan USDC; 2. Stablecoins cryptocurrency-collateralized dikeluarkan melalui aset crypto arus perdana. Kelebihannya adalah desentralisasi dan ketelusan. Kelemahannya ialah mereka menghadapi risiko pembubaran. Projek perwakilan ialah Dai. 3. Stablecoins algoritma bergantung kepada algoritma untuk menyesuaikan bekalan dan permintaan untuk mengekalkan kestabilan harga. Kelebihannya adalah bahawa mereka tidak perlu cagaran dan mempunyai kecekapan modal yang tinggi. Kelemahannya adalah bahawa mekanisme itu rumit dan risiko tinggi. Terdapat kes keruntuhan dekan. Mereka masih disiasat.

Apa itu Treehouse (pokok)? Bagaimanakah pokok pokok (pokok) berfungsi? Produk Treehouse Tethdor - Kadar Petikan Desentralisasi Gonuts Titik Sistem Treehouse menyoroti token pokok dan Token Ekonomi Gambaran Keseluruhan pada suku ketiga 2025 Team Pembangunan Roadmap, Pelabur dan Rakan Kongsi Treehouse Pengasas Pasukan Dana Pelaburan Ringkasan Apabila Defi terus berkembang, Permintaan untuk Produk Pendapatan Tetap Berkembang. Walau bagaimanapun, membina blok block

Pertempuran lisan mengenai nilai "Token Pencipta" menyapu bulatan sosial crypto. Base dan dua rantaian awam utama Solana Helmsmans mempunyai konfrontasi yang jarang berlaku, dan perdebatan yang sengit di sekitar Zora dan pam.Fun dengan serta-merta menyalakan kegilaan perbincangan pada Cryptotwitter. Di manakah konfrontasi yang dipenuhi serbuk ini berasal? Mari kita cari. Kontroversi berlaku: Fius serangan Sterling Crispin terhadap Zora adalah penyelidik Delcomplex Sterling Crispin membombardir Zora di platform sosial. Zora adalah protokol sosial di rantaian asas, memberi tumpuan kepada laman utama dan kandungan pengguna
