threejs:当摄像机到达网格末端时,如何在任何方向重新定位网格?

时间:2016-11-16 14:26:38

标签: javascript three.js

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

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

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

任何帮助都将受到高度赞赏。

1 个答案:

答案 0 :(得分:2)

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

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