javascript - 三个 : How to reposition grid in any direction when camera reaches near grid's end?

Question

我想创建一个无限网格平面，并希望重新使用现有网格而不是创建一个非常大的网格。

我尝试过使用 camera.position.z 和 grid.position.z，但是当我四处移动相机时 grid.position.z 始终为 0。

需要的功能更像是追逐相机示例 ( https://stemkoski.github.io/Three.js/Chase-Camera.html )，但地板永无止境。

如有任何帮助，我们将不胜感激。

Answer 1

这不是最终的解决方案，但可以作为起点。

当您使用 THREE.GridHelper() 时，您可以使其线条向您想要的方向移动。我挖掘了助手的源代码，发现了它的几何图形中线点的顺序。这个想法:如果你知道哪个点应用于哪条线，那么你可以设置它的方向。因为我们在那里有垂直线和水平线，所以它们的点可以在 x 轴上移动垂直线，在 z 轴上移动水平线。顶点的顺序是:

start_point_horizontal, end_point_horizontal, start_point_vertical, end_point_vertical,... 

以此类推，不断重复。

因此，了解它后，我们可以为每个顶点设置一个属性，以了解它是应用于垂直线还是水平线。

  var hv = new Float32Array(plane.geometry.attributes.position.count);

  for (var i = 0; i < plane.geometry.attributes.position.count; i+= 4) {
    hv[i+0] = 0;
    hv[i+1] = 0;
    hv[i+2] = 1;
    hv[i+3] = 1;
  }

  plane.geometry.addAttribute("horivert", new THREE.BufferAttribute(hv, 1));

我们需要的全局变量:

var clock = new THREE.Clock();
var direction = new THREE.Vector3();
var speed = 1;
var size = 10;
var delta = 0;
var shift = new THREE.Vector3();
var plane; // our GridHelper

然后在动画循环中我们将它们放在一起:

  delta = clock.getDelta();

  shift.copy(direction).normalize().multiplyScalar(delta * speed);
  var arr = plane.geometry.attributes.position.array;
  for(var i=0; i < plane.geometry.attributes.position.count; i++)
  {
    var hv = plane.geometry.attributes.horivert.array[i];
    if (hv == 1) // if it's a point of a vertical line, then we move it on x-axis
        {
        arr[i * 3 + 0] += shift.x;
        if (arr[i * 3 + 0] < -size)
            arr[i * 3 + 0] = size - Math.abs(-size - arr[i * 3 + 0]);
        if (arr[i * 3 + 0] > size)
            arr[i * 3 + 0] = -size + Math.abs(arr[i * 3 + 0] - size);
      }
      else //else we move it on z-axis
      {
        arr[i * 3 + 2] += shift.z;
        if (arr[i * 3 + 2] < -size)
            arr[i * 3 + 2] = size - Math.abs(-size - arr[i * 3 + 2]);
        if (arr[i * 3 + 2] > size)
            arr[i * 3 + 2] = -size + Math.abs(arr[i * 3 + 2] - size);
      }
    }
    plane.geometry.attributes.position.needsUpdate = true;

如果一个点达到下限，则它移动到上限，反之亦然。

jsfiddle我刚刚从头开始制作的示例。