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示例我刚刚从头开始制作。

threejs：当摄像机到达网格末端时，如何在任何方向重新定位网格？

1 个答案: