create a more even looking plane mesh from equlaterial triangles

[meszaros-lajos-gyorgy]

Currently the plain mesh is divided into squares, which are split in 2 right triangles. If there would be a surface that is made up of equilateral triangles then that would solve the issue of having an uneven/wave-like pattern after bumping

[meszaros-lajos-gyorgy]

The uneven nature of the standard three.js plane geometry triangulation can be seen with the shadows here and that everything is pointing into one direction:

[meszaros-lajos-gyorgy]

one example I got is this, need to try it out:

function generateHexGrid(rows, cols, size) {
    const vertices = [];
    const indices = [];

    let index = 0;
    for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
            // Az eltolás a méret és az oszlop/rows alapján
            const xOffset = col * (size * Math.sqrt(3));
            const yOffset = row * (size * 1.5);

            if (col % 2 !== 0) yOffset += size * 0.75;

            // Háromszög csúcsai
            vertices.push(xOffset, yOffset + size, 0);
            vertices.push(xOffset - size * Math.sqrt(3) / 2, yOffset - size / 2, 0);
            vertices.push(xOffset + size * Math.sqrt(3) / 2, yOffset - size / 2, 0);

            indices.push(index, index + 1, index + 2);
            index += 3;
        }
    }

    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3));
    geometry.setIndex(indices);
    geometry.computeVertexNormals();

    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    return new THREE.Mesh(geometry, material);
}

const hexGrid = generateHexGrid(5, 5, 1);
scene.add(hexGrid);