如何在Vue中使用Mapbox和Three.js確保三維物體的底部固定在地圖上？
Apr 04, 2025 pm 06:42 PM
Vue中Mapbox和Three.js：實(shí)現(xiàn)3D模型與地圖視角的完美適配
本文探討如何在Vue.js應(yīng)用中，結(jié)合Mapbox GL JS和Three.js，實(shí)現(xiàn)三維模型與地圖視角的同步，確保模型底部始終固定在地圖表面，不會(huì)因視角變化而偏移。這在構(gòu)建地理信息系統(tǒng)或3D地圖可視化應(yīng)用中至關(guān)重要。
假設(shè)你已成功渲染3D立方體到Mapbox地圖，但視角移動(dòng)時(shí)立方體位置發(fā)生漂移。問(wèn)題在于Three.js坐標(biāo)系與Mapbox地圖坐標(biāo)系的轉(zhuǎn)換和模型位置的設(shè)置。
以下代碼片段展示了可能存在問(wèn)題的代碼結(jié)構(gòu)，其中render函數(shù)更新Three.js相機(jī)矩陣，calculatemodeltransform函數(shù)進(jìn)行坐標(biāo)轉(zhuǎn)換：
render: (gl, matrix) => {
const m = new THREE.Matrix4().fromArray(matrix);
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));
customLayer.camera.projectionMatrix = m.multiply(l);
customLayer.renderer.resetState();
customLayer.renderer.render(customLayer.scene, customLayer.camera);
customLayer.map.triggerRepaint();
},
calculatemodeltransform(point) {
const modelAsMercatorCoordinate = mapboxgl.MercatorCoordinate.fromLngLat([point.lng, point.lat], this.modelAltitude);
return {
translateX: modelAsMercatorCoordinate.x,
translateY: modelAsMercatorCoordinate.y,
translateZ: modelAsMercatorCoordinate.z,
rotateX: this.modelRotate[0],
rotateY: this.modelRotate[1],
rotateZ: this.modelRotate[2],
scale: modelAsMercatorCoordinate.meterInMercatorCoordinateUnits()
};
}
核心問(wèn)題在于模型的translateZ以及模型創(chuàng)建時(shí)的垂直位置。 我們需要調(diào)整模型位置，使其底部與地圖平面精確對(duì)齊。
解決方案：
- 模型創(chuàng)建調(diào)整: 在創(chuàng)建Three.js模型時(shí)，考慮模型高度，并調(diào)整其垂直位置（y軸）使其底部位于地圖平面（通常y=0）。
// 創(chuàng)建一個(gè)正方體幾何體，altitude 為模型高度
const geometry = new THREE.BoxGeometry(20, altitude, 20);
const material = new THREE.MeshStandardMaterial({ color, transparent: true, opacity: 0.8 });
const cube = new THREE.Mesh(geometry, material);
// 關(guān)鍵步驟：將立方體底部放置在地圖平面上
cube.position.y = altitude / 2;
-
render函數(shù)調(diào)整: 在render函數(shù)中，根據(jù)模型高度調(diào)整translateZ值，確保模型底部始終與地圖平面對(duì)齊。
const l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ - altitude / 2) .scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)) // ... 其他轉(zhuǎn)換矩陣
通過(guò)以上調(diào)整，即使地圖視角變化，三維模型的底部也會(huì)保持在地圖表面，實(shí)現(xiàn)完美的視角適配。 請(qǐng)確保altitude變量正確反映模型的高度。 如有需要，可以根據(jù)模型的實(shí)際幾何形狀進(jìn)一步微調(diào)垂直位置。
以上是如何在Vue中使用Mapbox和Three.js確保三維物體的底部固定在地圖上？的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線(xiàn)人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何用PHP搭建社交分享功能 PHP分享接口集成實(shí)戰(zhàn)
Jul 25, 2025 pm 08:51 PM
在PHP中搭建社交分享功能的核心方法是通過(guò)動(dòng)態(tài)生成符合各平臺(tái)要求的分享鏈接。1.首先獲取當(dāng)前頁(yè)面或指定的URL及文章信息；2.使用urlencode對(duì)參數(shù)進(jìn)行編碼；3.根據(jù)各平臺(tái)協(xié)議拼接生成分享鏈接；4.在前端展示鏈接供用戶(hù)點(diǎn)擊分享；5.動(dòng)態(tài)生成頁(yè)面OG標(biāo)簽優(yōu)化分享內(nèi)容展示；6.務(wù)必對(duì)用戶(hù)輸入進(jìn)行轉(zhuǎn)義以防止XSS攻擊。該方法無(wú)需復(fù)雜認(rèn)證，維護(hù)成本低，適用于大多數(shù)內(nèi)容分享需求。
如何用PHP結(jié)合AI實(shí)現(xiàn)文本糾錯(cuò) PHP語(yǔ)法檢測(cè)與優(yōu)化
Jul 25, 2025 pm 08:57 PM
要實(shí)現(xiàn)PHP結(jié)合AI進(jìn)行文本糾錯(cuò)與語(yǔ)法優(yōu)化，需按以下步驟操作：1.選擇適合的AI模型或API，如百度、騰訊API或開(kāi)源NLP庫(kù)；2.通過(guò)PHP的curl或Guzzle調(diào)用API并處理返回結(jié)果；3.在應(yīng)用中展示糾錯(cuò)信息并允許用戶(hù)選擇是否采納；4.使用php-l和PHP_CodeSniffer進(jìn)行語(yǔ)法檢測(cè)與代碼優(yōu)化；5.持續(xù)收集反饋并更新模型或規(guī)則以提升效果。選擇AIAPI時(shí)應(yīng)重點(diǎn)評(píng)估準(zhǔn)確率、響應(yīng)速度、價(jià)格及對(duì)PHP的支持。代碼優(yōu)化應(yīng)遵循PSR規(guī)范、合理使用緩存、避免循環(huán)查詢(xún)、定期審查代碼，并借助X
全球最權(quán)威的加密貨幣行情網(wǎng)站Top10（2025最新版）
Jul 29, 2025 pm 12:48 PM
2025年十大權(quán)威加密貨幣行情與數(shù)據(jù)分析平臺(tái)為：1. CoinMarketCap，提供全面的市值排名和基礎(chǔ)市場(chǎng)數(shù)據(jù)；2. CoinGecko，以獨(dú)立性和信任分?jǐn)?shù)提供多維度項(xiàng)目評(píng)估；3. TradingView，擁有最專(zhuān)業(yè)的K線(xiàn)圖表和技術(shù)分析工具；4. 幣安行情，作為最大交易所提供最直接的實(shí)時(shí)數(shù)據(jù)；5. 歐易行情，突出衍生品關(guān)鍵指標(biāo)如持倉(cāng)量和資金費(fèi)率；6. Glassnode，專(zhuān)注于鏈上數(shù)據(jù)如活躍地址和巨鯨動(dòng)向；7. Messari，提供機(jī)構(gòu)級(jí)研究報(bào)告和嚴(yán)格標(biāo)準(zhǔn)化數(shù)據(jù)；8. CryptoCompa
幣圈免費(fèi)行情網(wǎng)站怎么選？2025年最全測(cè)評(píng)
Jul 29, 2025 pm 06:36 PM
2025年最適合查詢(xún)穩(wěn)定幣行情的免費(fèi)工具依次為：1. 幣安，數(shù)據(jù)權(quán)威、交易對(duì)豐富，集成TradingView圖表適合技術(shù)分析；2. 歐易，界面清晰、功能整合強(qiáng)，支持Web3賬戶(hù)與DeFi一站式操作；3. CoinMarketCap，收錄幣種多，穩(wěn)定幣板塊可查看市值排名與脫錨情況；4. CoinGecko，數(shù)據(jù)維度全面，提供信任分?jǐn)?shù)與社區(qū)活躍度指標(biāo)，立場(chǎng)中立；5. 火幣（HTX），行情穩(wěn)定、操作友好，適合主流資產(chǎn)查詢(xún)；6. Gate.io，新幣與小眾幣種收錄最快，是挖掘潛力項(xiàng)目的首選；7. Tra
Ethena財(cái)庫(kù)策略：穩(wěn)定幣第三帝國(guó)的崛起
Jul 30, 2025 pm 08:12 PM
目錄雙幣系統(tǒng)大逃殺真實(shí)采用仍未發(fā)生結(jié)語(yǔ)2023年8月，MakerDAO生態(tài)借貸協(xié)議Spark給出$DAI8%的年化收益，隨后孫割分批進(jìn)入，累計(jì)投入23萬(wàn)枚$stETH，最高占Spark存款量15%以上，逼得MakerDAO緊急提案，把利率下調(diào)到5%。MakerDAO的本意是“補(bǔ)貼”$DAI的使用率，差點(diǎn)變成孫宇晨的SoloYield。2025年7月，Ethe
以太坊(ETH) NFT 七日銷(xiāo)量近1.6億美元，貸款機(jī)構(gòu)借助 World ID 推出無(wú)擔(dān)保加密貸款
Jul 30, 2025 pm 10:06 PM
目錄加密市場(chǎng)全景掘金熱門(mén)代幣VINEVine（ 114.79%，流通市值1.44億美元）ZORAZora（ 16.46%，流通市值2.9億美元）NAVXNAVIProtocol（ 10.36%，流通市值3,576.24萬(wàn)美元）Alpha解讀過(guò)去7天以太坊鏈上NFT銷(xiāo)售額近1.6億美元，CryptoPunks居第一去中心化證明者網(wǎng)絡(luò)Succinct推出Succinct基金會(huì)，或?yàn)榇鷰臫GE
什么是穩(wěn)定幣？一文看懂穩(wěn)定幣！
Jul 29, 2025 pm 01:03 PM
穩(wěn)定幣是價(jià)值錨定法幣或商品的加密貨幣，旨在解決比特幣等價(jià)格波動(dòng)問(wèn)題，其重要性體現(xiàn)在作為避險(xiǎn)工具、交易媒介和連接法幣與加密世界的橋梁。1. 法幣抵押穩(wěn)定幣由美元等法定貨幣全額儲(chǔ)備支持，優(yōu)點(diǎn)是機(jī)制簡(jiǎn)單穩(wěn)定，缺點(diǎn)是依賴(lài)中心化機(jī)構(gòu)信任，代表項(xiàng)目有USDT、USDC；2. 加密貨幣抵押穩(wěn)定幣通過(guò)超額抵押主流加密資產(chǎn)發(fā)行，優(yōu)點(diǎn)是去中心化和透明，缺點(diǎn)是面臨清算風(fēng)險(xiǎn)，代表項(xiàng)目為DAI；3. 算法穩(wěn)定幣依靠算法調(diào)節(jié)供需維持價(jià)格穩(wěn)定，優(yōu)點(diǎn)是無(wú)需抵押、資本效率高，缺點(diǎn)是機(jī)制復(fù)雜、風(fēng)險(xiǎn)高，曾出現(xiàn)脫錨崩潰案例，目前仍處探
以太坊是什么幣？以太坊ETH獲得的方式有哪些？
Jul 31, 2025 pm 11:00 PM
以太坊是一個(gè)基于智能合約的去中心化應(yīng)用平臺(tái)，其原生代幣ETH可通過(guò)多種方式獲取。1、通過(guò)Binance必安、歐意ok等中心化平臺(tái)注冊(cè)賬戶(hù)、完成KYC認(rèn)證并用穩(wěn)定幣購(gòu)買(mǎi)ETH；2、通過(guò)去中心化平臺(tái)連接數(shù)字儲(chǔ)存，使用穩(wěn)定幣或其他代幣直接兌換ETH；3、參與網(wǎng)絡(luò)質(zhì)押，可選擇獨(dú)立質(zhì)押（需32個(gè)ETH）、流動(dòng)性質(zhì)押服務(wù)或在中心化平臺(tái)一鍵質(zhì)押以獲取獎(jiǎng)勵(lì)；4、通過(guò)為Web3項(xiàng)目提供服務(wù)、完成任務(wù)或獲得空投等方式賺取ETH。建議初學(xué)者從主流中心化平臺(tái)入手，逐步過(guò)渡到去中心化方式，并始終重視資產(chǎn)安全與自主研究，以
