Getting grid divisions positions

const grid = new GridHelper(250, 5)

will give me a 5x5 grid. From there, is there an easy way to access the positions of all the 25 divisions, if it’s stored in an array I can’t seem to find it. If not, what would be the most efficient way to get all the individual positions of the 25 divisions.

Just to clarify: Are you looking for the vertex data of the grid’s line segments or for the center points of each grid cell?

The center point of each grid cell.

Try it like so: https://jsfiddle.net/t6o1L3c0/

The center points are visualized as a point cloud.

let camera, scene, renderer;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);
  camera.position.set(0, 5, 7);
  camera.lookAt(0, 0, 0);

  scene = new THREE.Scene();

  const size = 10;
  const divisions = 10;

  const helper = new THREE.GridHelper(size, divisions);
  scene.add(helper);

  const points = [];

  const step = size / divisions;
  const halfSize = size / 2;
  const halfStep = step / 2;
  const offset = halfSize - halfStep;

  for (let i = 0; i < divisions; i++) {

    for (let j = 0; j < divisions; j++) {

      points.push(new THREE.Vector3(offset - i * step, 0, offset - j * step));

    }

  }

  const geometry = new THREE.BufferGeometry().setFromPoints(points);
  const material = new THREE.PointsMaterial({
    size: 0.1
  });
  const pointCloud = new THREE.Points(geometry, material);
  scene.add(pointCloud);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function render() {

  renderer.render(scene, camera);

}

2 Likes