3Dオブジェクトの下部が、VUEのMapboxと3.jsを使用してマップ上に固定されていることを確認する方法は？

VUEのMapboxと3.js：3Dモデルとマップの視点の完璧な適応を実装する

この記事では、3次元モデルをVUE.JSアプリケーションのマップ表示角度と同期させる方法について説明します。MAPBOXGLJSとThree.JSを組み合わせて、モデルの底部が常にマップ表面に固定され、表示角度の変化が原因でオフセットされないようにします。これは、地理情報システムまたは3Dマップ視覚化アプリケーションの構築において重要です。

3Dキューブをマップボックスマップに正常にレンダリングしたが、表示角が動くとキューブの位置がドリフトするとします。問題は、Three.js座標系とMapbox Map座標系の変換とモデル位置の設定にあります。

次のコードスニペットは、可能な問題のあるコード構造を示しています。 render関数は3.JSカメラマトリックスを更新し、 calculatemodeltransform関数は座標変換を実行します。

レンダリング：（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と、モデルが作成されたときの垂直位置にあります。モデルの位置を調整して、その底がマッププレーンと正確に整列するようにする必要があります。

解決：

1. モデルの作成調整： 3.jsモデルを作成するときは、モデルの高さを検討し、垂直位置（y軸）を調整して、その底がマッププレーン（通常y = 0）にあるように調整します。

 //キューブジオメトリを作成します。高度はモデルの高さconst幾何学=新しい3.BoxGeometry（20、高度、20）です。
const material = new 3.meshstandardmaterial（{color、透明：true、ofacity：0.8}）;
const cube = new 3.mesh（幾何学、材料）;

//キーステップ：キューブの底をマッププレーンCube.y = altitude / 2に配置します。

2. render関数調整： render関数で、モデルの高さに応じてtranslateZ値を調整して、モデルの底部が常にマップ平面と常に整列していることを確認します。

 const l = new 3.matrix4（）。maketranslation（modeltransform.translatex、modeltransform.translatey、modeltransform.translatez -altitude / 2）
  .Scale（new 3.Vector3（modelTransform.scale、-modeltransform.scale、modelTransform.scale））））
  // ...その他の変換マトリックス

上記の調整により、マップビューの角度が変化したとしても、3次元モデルの底部がマップ表面に残り、完全な視聴角の適応を実現します。 altitude変数がモデルの高さを正しく反映していることを確認してください。必要に応じて、モデルの実際のジオメトリに従って垂直位置をさらに微調整できます。

以上が3Dオブジェクトの下部が、VUEのMapboxと3.jsを使用してマップ上に固定されていることを確認する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。