threejs:当相机接近网格末端时，如何在任何方向重新定位网格

threejs: How to reposition grid in any direction when camera reaches near grid's end?

本文关键字：网格 方向 任何 新定位 定位 相机 接近 threejs      更新时间：2023-09-26

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

我尝试使用camera.position.z和grid.position。Z，但是grid.position.z总是0，因为我在移动相机。

需要的功能更像追逐相机的例子(https://stemkoski.github.io/Three.js/Chase-Camera.html)，但没有结束的地板。

这不是最终的解决方案，但它可以是一个起点。

当您使用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;

如果一个点达到了下限，那么它将移动到上限，反之亦然。

相关文章：