3Dオブジェクトの下部が、VUEのMapboxと3.jsを使用してマップ上に固定されていることを確認(rèn)する方法は？
Apr 04, 2025 pm 06:42 PM
VUEのMapboxと3.js：3Dモデルとマップの視點の完璧な適応を?qū)g裝する
この記事では、3次元モデルをVUE.JSアプリケーションのマップ表示角度と同期させる方法について説明します。MAPBOXGLJSとThree.JSを組み合わせて、モデルの底部が常にマップ表面に固定され、表示角度の変化が原因でオフセットされないようにします。これは、地理情報システムまたは3Dマップ視覚化アプリケーションの構(gòu)築において重要です。
3Dキューブをマップボックスマップに正常にレンダリングしたが、表示角が動くとキューブの位置がドリフトするとします。問題は、Three.js座標(biāo)系とMapbox Map座標(biāo)系の変換とモデル位置の設(shè)定にあります。
次のコードスニペットは、可能な問題のあるコード構(gòu)造を示しています。 render関數(shù)は3.JSカメラマトリックスを更新し、 calculatemodeltransform関數(shù)は座標(biāo)変換を?qū)g行します。
レンダリング：（GL、マトリックス）=> {
const m = new 3.matrix4（）。fromArray（matrix）;
const l = new 3.matrix4（）。maketranslation（modeltransform.translatex、modeltransform.translatey、modeltransform.translatez）
.Scale（new 3.Vector3（modelTransform.scale、-modeltransform.scale、modelTransform.scale））））
.Multiply（new 3.Matrix4（）。MakerotationAxis（new 3.Vector3（1、0、0）、ModelTransform.Rotatex））
.Multiply（new 3.Matrix4（）。MakerotationAxis（new 3.Vector3（0、1、0）、ModelTransform.Rotatey）））
.Multiply（new 3.Matrix4（）。makerotationAxis（new 3.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 modelsmercatorCoordinate = mapboxgl.mercatorCoordinate.fromlnglat（[point.lng、point.lat]、this.modelaltitude）;
戻る {
translatex：modelasmercatorcoordinate.x、
Translatey：ModelAsmercatorCoordinate.Y、
Translatez：ModelAsmercatorCoordinate.Z、
rotatex：this.modelrotate [0]、
rotatey：this.modelrotate [1]、
Rotatez：this.modelrotate [2]、
スケール：ModelAsmercatorCoordinate.MeterInMercatorCoordinateUnits（）
};
}
コアの問題は、モデルのtranslateZと、モデルが作成されたときの垂直位置にあります。モデルの位置を調(diào)整して、その底がマッププレーンと正確に整列するようにする必要があります。
解決：
- モデルの作成調(diào)整： 3.jsモデルを作成するときは、モデルの高さを検討し、垂直位置（y軸）を調(diào)整して、その底がマッププレーン（通常y = 0）にあるように調(diào)整します。
//キューブジオメトリを作成します。高度はモデルの高さconst幾何學(xué)=新しい3.BoxGeometry（20、高度、20）です。
const material = new 3.meshstandardmaterial（{color、透明：true、ofacity：0.8}）;
const cube = new 3.mesh（幾何學(xué)、材料）;
//キーステップ：キューブの底をマッププレーンCube.y = altitude / 2に配置します。
-
render関數(shù)調(diào)整：render関數(shù)で、モデルの高さに応じてtranslateZ値を調(diào)整して、モデルの底部が常にマップ平面と常に整列していることを確認(rèn)します。
const l = new 3.matrix4（）。maketranslation（modeltransform.translatex、modeltransform.translatey、modeltransform.translatez -altitude / 2） .Scale（new 3.Vector3（modelTransform.scale、-modeltransform.scale、modelTransform.scale）））） // ...その他の変換マトリックス
上記の調(diào)整により、マップビューの角度が変化したとしても、3次元モデルの底部がマップ表面に殘り、完全な視聴角の適応を?qū)g現(xiàn)します。 altitude変數(shù)がモデルの高さを正しく反映していることを確認(rèn)してください。必要に応じて、モデルの実際のジオメトリに従って垂直位置をさらに微調(diào)整できます。
以上が3Dオブジェクトの下部が、VUEのMapboxと3.jsを使用してマップ上に固定されていることを確認(rèn)する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
世界で最も権威ある暗號通貨市場のトップ10（2025年の最新バージョン）
Jul 29, 2025 pm 12:48 PM
2025年の上位10の権威ある暗號通貨市場およびデータ分析プラットフォームは次のとおりです。1。COINMARKETCAP、包括的な時価総額ランキングと基本的な市場データを提供します。 2。Coingecko、獨立性と信頼スコアを伴う多次元プロジェクト評価を提供する。 3. TradingView、最もプロフェッショナルなKラインチャートとテクニカル分析ツールを持っています。 4。最大の交換として最も直接的なリアルタイムデータを提供するバイナンス市場。 5。OUYI市場、位置のボリュームや資本レートなどの重要な派生インジケーターの強調(diào)。 6。GlassNode、アクティブアドレスや巨大なクジラのトレンドなどのオンチェーンデータに焦點を當(dāng)てています。 7。Messari、制度レベルの研究報告と厳格な標(biāo)準(zhǔn)化されたデータを提供する。 8。CryptoCompa
イーサリアムとは何ですか？イーサリアムETHを取得する方法は何ですか？
Jul 31, 2025 pm 11:00 PM
Ethereumは、スマートコントラクトに基づいた分散型アプリケーションプラットフォームであり、そのネイティブトークンETHはさまざまな方法で取得できます。 1. BinanceやOuyiokなどの集中プラットフォームを介してアカウントを登録し、KYC認(rèn)定を完了し、StablecoinsでETHを購入します。 2.分散型プラットフォームを介してデジタルストレージに接続し、Stablecoinsまたは他のトークンとETHを直接交換します。 3.ネットワーク誓約に參加すると、獨立した誓約（32 ETHが必要）、Liquid Pledge Services、または一元化されたプラットフォームでのワンクリック誓約を選択することができます。 4. Web3プロジェクトにサービスを提供したり、タスクを完了したり、エアドロップを取得したりすることにより、ETHを獲得します。初心者は、主流の集中プラットフォームから始まり、徐々に分散化された方法に移行し、常に資産のセキュリティと獨立した研究を重要視することをお勧めします。
通貨サークルで自由市場のウェブサイトを選択する方法は？ 2025年の最も包括的なレビュー
Jul 29, 2025 pm 06:36 PM
2025年にStablecoin市場を照會するための最も適切なツールは次のとおりです。1。Binance、権威あるデータと豊富な取引ペア、およびテクニカル分析に適した統(tǒng)合されたTradingViewチャート。 2。OUYI、明確なインターフェイスと強力な機能的統(tǒng)合を備えており、Web3アカウントとDefiのワンストップ操作をサポートします。 3。多くの通貨を備えたCoinMarketCap、およびStablecoinセクターは、市場価値のランキングと學(xué)部長を見ることができます。 4。Coingeckoは、包括的なデータディメンションを備えており、信頼スコアとコミュニテ?；顒婴沃笜?biāo)を提供し、中立的な位置を持っています。 5。Huobi（HTX）、安定した市場條件と友好的な運用、主流の資産照會に適しています。 6。Gate.io、新しいコインとニッチ通貨の最速のコレクションを備えたものであり、プロジェクトを探求するための最初の選択肢です。 7。トラ
エセナ財務(wù)戦略：馬鹿げた第三帝國の臺頭
Jul 30, 2025 pm 08:12 PM
二重通貨システムでのバトルロワイヤルの実際の使用はまだ発生していません。結(jié)論2023年8月、Makerdao Ecological Lending Protocol Sparkは、$ DAI8％の年間収益率を與えました。その後、Sun Chiはバッチに入り、合計230,000ドルのステスを投資し、Sparkの堆積物の15％以上を占め、Makerdaoに金利を5％に引き下げるように緊急提案をすることを余儀なくされました。 Makerdaoの當(dāng)初の意図は、$ Daiの使用率を「助成」することであり、ほとんどJustin Sunのソロの利回りになりました。 2025年7月、エセ
Ethereum（Eth）NFTは7日間で1億6,000萬ドル近くを販売し、貸し手は世界IDで無擔(dān)保の暗號ローンを開始しました
Jul 30, 2025 pm 10:06 PM
目次CRYPTO MARKET PANORAMIC NUGGET人気トークンヴァインバイン（114.79％、円形市場価値144百萬米ドル）Zorazora（16.46％、円形市場価値290百萬米ドル）分散化されたProverネットワークで最初にランク付けされたCryptopunksは、簡潔な基礎(chǔ)を立ち上げました。これはトークンTGEかもしれません
Stablecoinとは何ですか？ 1つの記事でStablecoinsを理解してください！
Jul 29, 2025 pm 01:03 PM
Stablecoinsは、ビットコインなどの価格変動を解決するために設(shè)計された、フィアット通貨または商品に固定された価値のある暗號通貨です。それらの重要性は、ヘッジツール、取引の媒體、およびfiat通貨を暗號の世界と結(jié)びつける橋としての役割に反映されています。 1.フィアットコラート化されたスタブコインは、米ドルなどのフィアット通貨によって完全にサポートされています。利點は、メカニズムがシンプルで安定していることです。不利な點は、彼らが集中型機関の信頼に依存していることです。それらは、USDTおよびUSDCを含むプロジェクトを表しています。 2。暗號通貨の協(xié)力化されたスタブコインは、過剰に協(xié)力化された主流の暗號資産を通じて発行されます。利點は分散化と透明性です。欠點は、彼らが清算のリスクに直面していることです。代表プロジェクトはDaiです。 3.アルゴリズムの安定性は、アルゴリズムに依存して、価格の安定性を維持するために需要と供給を調(diào)整します。利點は、それらが擔(dān)保である必要がなく、高い資本効率を持つ必要がないことです。欠點は、メカニズムが複雑でリスクが高いことです。學(xué)部長の崩壊の癥例があります。彼らはまだ調(diào)査中です。
ビナンスツリーハウス（ツリーコイン）とは何ですか？今後のツリーハウスプロジェクトの概要、トークンエコノミーの分析、將來の開発
Jul 30, 2025 pm 10:03 PM
ツリーハウス（ツリー）とは何ですか？ Treehouse（Tree）はどのように機能しますか？ツリーハウス製品テスドール - 分散化された見積レートゴナッツポイントシステムツリーハウスは、2025年のロードマップ開発チームの第3四半期のツリートークンとトークンエコノミクスの概要を強調(diào)表示します。ただし、ブロックチェーン上に構(gòu)築されています
SolanaとBase Coinの創(chuàng)設(shè)者は議論を開始します：Zoraのコンテンツには「基本的な価値」があります
Jul 30, 2025 pm 09:24 PM
「クリエータートークン」の価値についての口頭での戦いが、暗號ソーシャルサークルを越えて掃引されました。 BaseとSolanaの2人の主要な公共チェーンHelmsmansには、珍しい正面からの対立があり、ZoraとPumpをめぐる激しい議論がありました。この火薬で満たされた対立はどこから來たのですか？調(diào)べてみましょう。論爭が発生した：スターリングクリスピンのゾラに対する攻撃のヒューズは、デルコンプレックスの研究者スターリングクリスピンがソーシャルプラットフォームでゾラを公に砲撃したことでした。 Zoraはベースチェーンのソーシャルプロトコルであり、ユーザーのホームページとコンテンツのトークン化に焦點を當(dāng)てています
