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

Question

I want to create an infinite grid plane and want to re-use existing grid instead of creating a very large grid.

I have tried using camera.position.z and grid.position.z, but grid.position.z is always 0 as i am moving camera around.

Needed functionality more like chase-camera example (https://stemkoski.github.io/Three.js/Chase-Camera.html), but with never ending floor.

Any help would be highly appreciated.

Provided example uses textures and offsets to reposition, but i am using gridhelper which gives 'undefined' for 'grid.offset.set(...)'. — Rameez Raja
@RameezRaja it's because THREE.GridHelper() doesn't have offset property — prisoner849
@prisoner849 is there anyway i can accomplish this (infinite grid plane in all directions)? — Rameez Raja

prisoner849 prisoner849 · Accepted Answer · 2016-11-18T19:01:34

This is not the ultimate solution, but it can be the start point.

As you use THREE.GridHelper(), you can make its lines move the direction you want. I dug in the source code of the helper and found the order of points of lines in its geometry. The idea: if you know which point applied to which line, then you can set it's direction. Because we have vertical and horizontal lines there, their points can be moved on x-axis for vertical lines and on z-axis for horizontal ones. The order of vertices is:

start_point_horizontal, end_point_horizontal, start_point_vertical, end_point_vertical,...

and so on, it's repeating.

So, knowing it, we can set an attribute to each vertex, to know if it's applied to a vertical line or to a horizontal line.

  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));

Global variables we will need:

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

And then in the animation loop we'll put it all together:

  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;

If a point reached the low limit, then it moves to the top limit, and the other way round.

jsfiddle example I've made just from scratch.

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

1 Answers