2

私はCesiumのように THREE.js でタイル張りの滑りやすい地図地球儀を構築しています。私が遭遇した問題は、高いズーム レベルで、Perspective/OrbitControls カメラを回転させると、タイルがジッター/シェイクすることです。おそらく精度の問題ですが、これを回避する方法がわかりません。

タイルの投影方法:


  • 親惑星の原点 ((0, -planetRadius, 0)の Object3D)を中心とする THREE.PlaneBufferGeometry を作成します。
  • 平面の各属性頂点を (1 つずつ) 正しい緯度、経度、標高 (lonLatToVector3()) に一致するポイントに投影します。
  • 次に、平面/タイルにズームインできるカメラがあり、カメラからタイルまでの距離によって、レンダリングするズーム レベルのタイルが決まります。

問題を解決しないもの:

  • 1 のニア クリッピング プレーン。
  • 近距離クリッピング範囲 (near: 1、far: 2 など)。
  • 対数または非対数深度バッファ。
  • カメラの視線を (0,0,0) に保ちます。
  • カメラを移動する代わりに惑星を回転させてパンします。
  • 世界全体を拡大または縮小します。

この質問は、このstackoverflowの質問に最も関連しており、問題の核心をより適切に表すためにそのフィドルを変更しました:

https://jsfiddle.net/6qfaf5h0/ 

  for (var p = 0; p < mesh.geometry.attributes.position.array.length; p += 3) {
    var xyzPos = lonLatToVector3(0 + (((p / 3) % tileRes) / (tileRes - 1)) * anglePlane,
      0 + (parseInt((p / 3) / tileRes) / (tileRes - 1)) * anglePlane,
      0);

    mesh.geometry.attributes.position.array[p] = xyzPos.x;
    mesh.geometry.attributes.position.array[p + 1] = xyzPos.y;
    mesh.geometry.attributes.position.array[p + 2] = xyzPos.z;
    //mesh.geometry.attributes.position.array[p + 2] = 0; //<- uncommenting fixes shake but I need this axis
  }

anglePlane < 0.01 のメッシュが必要です (いくつかの頂点しか表示されないポイントにズームインした場合) 揺れません。

その他の役立つ可能性のあるメモ:

  • 同じ投影アルゴリズムを使用しているにもかかわらず、スプライトは揺れません。
  • 場合によっては、平面 (標高 = 0) にズームインしても、すべてが波打っているように見えることがあります。

どんな助けでも大歓迎です。

4

0 に答える 0