Getting grid divisions positions

Questions
1 
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.

2

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?

3

The center point of each grid cell.

4

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