Rect, Hex, Zup

pick & grow

by yi hom

HTML

<div id="info">hex grid (rectangular) Z-up
    <br/>pick & grow by right button
   <br/>move to depress</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="http://jyunming-chen.github.io/hexgrid2/TrackballControls.js"></script>
<script src='http://jyunming-chen.github.io/hexgrid2/hexlib.js'></script>
<script id='myVertexShader' type="x-shader/x-vertex">
    uniform vec3 lightPos;
    varying vec4 wPos;
    varying float diffuse;
    void main() {
        vec4 eyepos = modelViewMatrix * vec4(position, 1.0);
        vec4 eyeLightPos = viewMatrix * vec4(lightPos, 1.0);
        vec3 ll = normalize(eyeLightPos.xyz - eyepos.xyz);
        vec3 eyenorm = normalize(normalMatrix * normal);
        diffuse = abs(dot(eyenorm, ll));
        wPos = modelMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
</script>
<script id='myFragmentShader' type="x-shader/x-vertex">
    //
    // FROM: http://jsfiddle.net/jmchen/cby3d1ag/
    //
    vec3 mod289(vec3 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }

    vec4 mod289(vec4 x) {
        return x - floor(x * (1.0 / 289.0)) * 289.0;
    }

    vec4 permute(vec4 x) {
        return mod289(((x * 34.0) + 1.0) * x);
    }

    vec4 taylorInvSqrt(vec4 r) {
        return 1.79284291400159 - 0.85373472095314 * r;
    }

    float snoise(vec3 v) {
        const vec2 C = vec2(1.0 / 6.0, 1.0 / 3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);

        // First corner
        vec3 i = floor(v + dot(v, C.yyy));
        vec3 x0 = v - i + dot(i, C.xxx);

        // Other corners
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min(g.xyz, l.zxy);
        vec3 i2 = max(g.xyz, l.zxy);

        //   x0 = x0 - 0.0 + 0.0 * C.xxx;
        //   x1 = x0 - i1  + 1.0 * C.xxx;
        //   x2 = x0 - i2  + 2.0 * C.xxx;
        //   x3 = x0 - 1.0 + 3.0 * C.xxx;
        vec3 x1 = x0 - i1 +...

CSS

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

JavaScript

var size = 5;
var columns = 16, rows = 15;
var layout = Layout(layout_pointy, Point(size, size), Point(0, 0));
var offset = Math.floor ((rows-1)/2);

// three.js related
var camera, scene, renderer;
var controls;
var mesh, hex0;
var pickPlane;
var vIDs = []; // row major
var mouse = new THREE.Vector2();


// hash (q,r)--> (q',r) --> vIDs (q',r)
function hashHexVertex (q,r) {
    var serial = r * (columns+offset) + (q+offset);
    return vIDs[serial];
}

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

    var vID = 0;
	var nskip;
    
    // assign all vIDs to -1
    for (j = 0; j < rows; j++)
        for (i = 0; i < columns+offset; i++)
            vIDs.push (-1);
    
    for (j = 0; j < rows; j++) {  // r: [0, rows-1]
        nskip = 0;  // for every row...
        vertsInThisRow = 0;
        for (i = 0; i < columns+offset; i++) {  // q': [0, columns+offset-1]
        // for (i = -offset; i < columns; i++) {
            
            // for every row: skip first hex's if necessary
            if (nskip < offset - Math.floor (j/2)) {
                ++nskip;
            	continue;
            }

            // trailing skip
            if (vertsInThisRow == columns) continue;  // vertices already built; start skip
            
            var xy = hex_to_pixel(layout, Hex(i-offset, j, - (i-offset) - j));

            p = new THREE.Vector3(xy.x, xy.y, 0);
            verts.push(p); 
            vIDs [i+(columns+offset)*j] = vID;
            ++vID;
            ++vertsInThisRow;
        }
    }

    console.log(vIDs);

    var faces = geometry.faces;

    // looping [q,r]
    for (j = 1; j < rows; j++) {  
        for (i = -offset; i < columns - 1; i++) {
            vidA = hashHexVertex (i, j);
            vidB = hashHexVertex (i+1, j);
            vidC = hashHexVertex (i+1, j-1);
            vidD = hashHexVertex (i, j-1);
            
            if (vidA != -1 && vidC != -1 &&...