JSFiddle - React, Tailwind, and code Playground

by 蔡 育曄

HTML

<div id="info">Hexagon Base</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script src="https://rawgit.com/jyunming-chen/tutsplus/master/js/text2D.js"></script>

CSS

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

body {
  overflow: hidden
}

JavaScript

class Cube {   // cube coordinate

	constructor(x, y, z) {
    this.x = x;
    this.y = y;
    this.z = z;
  }
  toHex() {
    var q = this.x
    var r = this.z
    return new Hex(q, r)
  }
  round() {   	// return a new Cube closest to this
    var rx = Math.round(this.x)
    var ry = Math.round(this.y)
    var rz = Math.round(this.z)
    var x_diff = Math.abs(rx - this.x)
    var y_diff = Math.abs(ry - this.y)
    var z_diff = Math.abs(rz - this.z)

    if (x_diff > y_diff && x_diff > z_diff)
      rx = -ry - rz
    else if (y_diff > z_diff)
      ry = -rx - rz
    else
      rz = -rx - ry

    return new Cube(rx, ry, rz)
  }
  
}

class Hex {  // axial coordinate

	constructor(q, r) {
    this.q = q;
    this.r = r;
    this.blood = 1;
    this.mesh = null;
    this.picked = false	    
  }
  toCube() {
    var x = this.q
    var z = this.r  
    var y = -x - z	// x + y + z = 0
    return new Cube(x, y, z)
  }
  pick() {
  	this.picked = true
    console.log ('i am picked:' + this.q + ',' + this.r)
  }
  draw(Hx,Hz,H) {
    let xy = []   // center of hex
    xy[0] = SIZE * (SQRT3 * this.q + 0.5 * SQRT3 * this.r)
    xy[1] = - SIZE * (1.5 * this.r)

    // draw a circle at center
    this.mesh = makeCircle();
    //this.mesh.rotation.x = -Math.PI/2;
    if(H === 1){
   		baseA.add(this.mesh)
      this.mesh.position.set(xy[0]+Hx, 5, xy[1]+Hz)
    } 
    if(H === 2){
    	baseB.add(this.mesh)
      this.mesh.position.set(xy[0]+Hx, 5, xy[1]+Hz)
    } 
  }
  round() {
  	//cube_to_axial(cube_round(axial_to_cube(hex)))
  	return this.toCube().round().toHex()
  }
  storage() {
    var ij = [];
    ij[0] = this.r - first_row;
    ij[1] = this.q - first_column(this.r);
    return ij;
  }
  static r2toHex(x, y) {   // modified pixel_to_hex
    // find the closest hex to (x,y)
  	var q = (SQRT3 / 3 * x - 1 / 3 * (-y)) / SIZE
  	var r = (2 / 3 * (-y)) / SIZE
  	//console.log ('q,r:' + q + ',' + r)
  	return new Hex(q, r).round()
 ...