How can I achieve a wireframe with squares?

Question

I am working on three.js. I added a plane, set the wireframe to true, and I want an effect of squares within this plane. Right now I have a diagonal line within the squares (because its two triangles combined) but I just want a square without the diagonal line. How can I achieve this?

const planeGeometry = new THREE.PlaneGeometry( 50, 50, 20, 20 );  

const planeMaterial = new THREE.MeshBasicMaterial(    {color: 0x000000,wireframe: true, side: THREE.DoubleSide} ); 

const plane = new THREE.Mesh( planeGeometry, planeMaterial ); 

scene.add( plane ); plane.rotation.x = Math.PI / 2; 

plane.position.y = -3.5;

I tried adjusting the width of the wireframeline, i disabled depth writing and depth testing, ...

Answer 1

Contrary to your claim that the gridHelper cannot rotate, it can be rotated and moved like any other object can, because it is a child of line which is a child of Object3D.

Using this code, you can move and rotate it:

const size = 50;
const divisions = 20;

const gridHelper = new THREE.GridHelper(size, divisions, 0x000000, 0x000000);

gridHelper.rotation.x = Math.PI / 4;
gridHelper.position.y = -3.5;

scene.add(gridHelper);

If you need functions like checking if an object intersects this plane, you could draw an invisible plane at the same position and use that for colision.