Hw4 helper

by Bai Shiuan Huang

HTML

<div id="info">Homework 4 Helper<br>Right click add a point
  <br><button id="compute" style="width:20%">make AABB</button>
  <button id="doObb" style="width:20%">make OBB</button>
  <button id="reset" style="width:20%">reset</button>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js"></script>
<!-- the following disable the regular right-button click -->
<script type="text/javascript">
  document.oncontextmenu = function() {
    return false;
  }

</script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var point;
var points = [];
var halfSize = 50;
var posArr = [];
init();
animate();
function findOBB(pts){
  var Xm = 0, Ym = 0;
  for(let i = 0; i < pts.length; i++){
      Xm += pts[i][0];
      Ym += pts[i][1];
  }
  Xm /= pts.length;
  Ym /= pts.length;
  console.log(Xm,Ym);
  console.log(pts);
  var pts_adjust = [];
  for(let i = 0; i < pts.length; i++){
      pts_adjust.push([pts[i][0] - Xm,pts[i][1]-Ym]);
  }
  console.log(pts_adjust);
  
  var xx, xy, yy;
  xx = xy = yy = 0;
  for (let i = 0; i < pts_adjust.length; i++) {
    xx += pts_adjust[i][0] * pts_adjust[i][0];
    xy += pts_adjust[i][0] * pts_adjust[i][1];
    yy += pts_adjust[i][1] * pts_adjust[i][1];
  }
  //console.log(xx,xy,yy);
  var A = [
    [xx, xy],
    [xy, yy]
  ];
  var ev = numeric.eig(A);
  console.log(ev);
  
  //console.log(ev.E.x) [0][0]>[1][0]
  
  var PC1 = [ev.E.x[0][0], ev.E.x[1][0]];
  var PC2 = [-ev.E.x[1][0], ev.E.x[0][0]];
  
  for (let i = 0; i < pts_adjust.length; i++) {
    //do dot
    //t --> transfer
    var x_t = pts_adjust[i][0] * PC1[0] + pts_adjust[i][1] * PC1[1];
    var y_t = pts_adjust[i][0] * PC2[0] + pts_adjust[i][1] * PC2[1];
    //console.log(x_t,y_t);
    pts_adjust[i][0] = x_t;
    pts_adjust[i][1] = y_t;
  }
  console.log(pts_adjust);
  let minX = 1e3, maxX = -1e3;
  let minY = 1e3, maxY = -1e3;
  for (let i = 0; i < points.length; i++) {
    if (pts_adjust[i][0] < minX) minX = pts_adjust[i][0];
    if (pts_adjust[i][0] > maxX) maxX = pts_adjust[i][0];
    if (pts_adjust[i][1] < minY) minY = pts_adjust[i][1];
    if (pts_adjust[i][1] > maxY) maxY = pts_adjust[i][1];
  }
  var pos1, pos2, pos3, pos4;
  pos1 = [Xm + maxX * PC1[0] + minY * PC2[0], Ym + maxX * PC1[1] + minY * PC2[1]];
  pos2 = [Xm + maxX * PC1[0] + maxY * PC2[0], Ym + maxX * PC1[1] + maxY * PC2[1]];
  pos3 = [Xm + minX * PC1[0] + maxY * PC2[0], Ym + minX * PC1[1] + maxY * PC2[1]];
  pos4 = [Xm + minX * PC1[0] + minY * PC2[0], Ym +...