hex grid (rhombus)

pick & grow

by jmcjc5u

HTML

<div id="info">hex grid (rhombus)
    <br/>pick & grow by right button</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js">


</script>
<script src='https://jyunming-chen.github.io/hexgrid2/hexlib.js'></script>

CSS

#info {
    position: absolute;
    top: 0px;
    width: 100%;
    padding: 10px;
    text-align: center;
    color: #ffff00
}
body {
    overflow: hidden;
}

JavaScript

var layout = Layout(layout_pointy, Point(5, 5), Point(0, 0));
var columns = 6,
    rows = 5;

var camera, scene, renderer;
var controls;
var mesh, hex0;
var pickPlane;
var vIDs = []; // row major

//var raycaster;
var mouse = new THREE.Vector2();

function initUnitHexMesh() {
    var material = new THREE.LineBasicMaterial({
        color: 0x0000ff
    });
    var geometry = new THREE.Geometry();
    for (var i = 0, theta = Math.PI / 2; i < 7; i++, theta += Math.PI / 3) {
        var p = new THREE.Vector3(Math.cos(theta), Math.sin(theta), 0);
        geometry.vertices.push(p);
    }
    var line = new THREE.Line(geometry, material);
    return line;
}

function hashHex(hex) {
    return hex.r * columns + hex.q
}

function highLightHex(hex) {
    hex0.visible = true;
    var p = hex_to_pixel(layout, hex);
    hex0.position.set(p.x, p.y, 0);
    console.log(hex);
    vID = hashHex(hex);
    mesh.geometry.vertices[vID].setZ(10);
}

function initHex() {
    var geometry = new THREE.Geometry();
    var verts = geometry.vertices; // ptr assignment
    var i, j, p;

    var vID = 0;

    for (j = 0; j < rows; j++) {
        for (i = 0; i < columns; i++) {
            var xy = hex_to_pixel(layout, Hex(i, j, 1 - i - j));
            p = new THREE.Vector3(xy.x, xy.y, 0);
            verts.push(p);
            vIDs.push(vID);
            ++vID;
        }
    }

    console.log(vIDs);

    var faces = geometry.faces;

    for (j = 1; j < rows; j++) {
        for (i = 0; i < columns - 1; i++) {
            a = j * columns + i; // a: (i,j);
            b = j * columns + i + 1; // b: (i+1,j);
            c = (j - 1) * columns + i + 1; // c: (i+1,j-1);
            d = (j - 1) * columns + i; // d: (i,j-1);
            faces.push(new THREE.Face3(a, c, b));
            faces.push(new THREE.Face3(a, d, c));
        }
    }

    geometry.computeFaceNormals();
    geometry.computeVertexNormals();

    var material = new THREE.MeshLambertMaterial({
        wireframe: true,
       ...