JSFiddle - React, Tailwind, and code Playground

by yi hom

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>


<script src="https://raw.githubusercontent.com/yihom/paper/master/TrackballControls.js"></script>

JavaScript

var size = 1;
var columns = 30,
  rows = 30;
var layout = Layout(layout_pointy, Point(size, size), Point(-21, -21));
var offset = Math.floor((rows - 1) / 2);
// 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 && vidB != -1)
        faces.push(new THREE.Face3(vidA, vidC, vidB));
      if (vidA != -1 && vidD != -1 && vidC != -1)
        faces.push(new THREE.Face3(vidA, vidD, vidC));
    }
  }

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

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