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)整して、その底がマッププレーンと正確に整列するようにする必要があります。

解決：

1. モデルの作成調(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に配置します。

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 サイトの他の関連記事を參照してください。