2

我正在THREE.js中构建一个平铺的滑动地图地球，就像 Cesium 一样。我遇到的问题是，当我在高缩放级别下旋转 Perspective/OrbitControls 相机时，瓷砖 jitter/shake。这可能是一个精度问题，但我不知道如何解决这个问题。

我如何投影瓷砖：

  • 创建一个以父行星原点为中心的 THREE.PlaneBufferGeometry
    （位于 (0, -planetRadius, 0) 的 Object3D）。
  • 将平面的每个属性顶点（一个接一个）投影到与其正确纬度、经度和海拔高度匹配的点 (lonLatToVector3())。
  • 然后我有一个可以放大平面/图块的相机，并且从相机到图块的距离决定了要渲染的缩放级别图块。

不能解决问题的事情：

  • 1 的近剪裁平面。
  • 近远剪辑范围（如近：1，远：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