Hw3 helper

by jason870509

HTML

<div id="info">Homework 3 Helper<br>Right click add a point
  <br><button id="compute" style="width:20%">make AABB</button>
  <button id="reset" style="width:20%">reset</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.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 = [], pointsX = [], pointsY = [];
var halfSize = 50;
var xbar=0, ybar=0;
var PC1 = new THREE.Vector3(0,0,0), PC2 = new THREE.Vector3(0,0,0);

init();
animate();

$('#reset').click (function() {
	scene.remove (scene.getObjectByName ('aabb'));  
  scene.remove (scene.getObjectByName ('obb'));  
  points.forEach (function(point) {
  	scene.remove(point)
  })
  points=[];
})

$("#compute").click(function() {
  let minX = 1e3,
    maxX = -1e3;
  let minY = 1e3,
    maxY = -1e3;
  for (let i = 0; i < points.length; i++) {
    if (points[i].position.x < minX)
      minX = points[i].position.x;
    if (points[i].position.x > maxX)
      maxX = points[i].position.x;
    if (points[i].position.y < minY)
      minY = points[i].position.y;
    if (points[i].position.y > maxY)
      maxY = points[i].position.y;
  }
	let aabb = drawBox ([minX,minY],[maxX,minY],[maxX,maxY],[minX,maxY], 'yellow');
  aabb.name = 'aabb'
  scene.add (aabb)
});

function findOBB(){
		xbar = 0;
    ybar = 0;
    
    for(i=0;i<points.length;i++){
    	xbar += points[i].position.x;
      ybar += points[i].position.y;
    }
    xbar /= points.length;
    ybar /= points.length;
    
    for(i=0;i<points.length;i++){
    	pointsX[i] = points[i].position.x - xbar;
      pointsY[i] = points[i].position.y - ybar;
    }
		var coMatrix = [[0,0],[0,0]];

    for(i=0;i<points.length;i++){
    	coMatrix[0][0] += pointsX[i] * pointsX[i];
      coMatrix[0][1] += pointsX[i] * pointsY[i];
      coMatrix[1][0] += pointsX[i] * pointsY[i];
      coMatrix[1][1] += pointsY[i] * pointsY[i];
    }
    
    coMatrix[0][0] /= points.length;
    coMatrix[0][1] /= points.length;
    coMatrix[1][0] /= points.length;
    coMatrix[1][1] /= points.length;
    
    var a = coMatrix[0][0], b = coMatrix[0][1], c = coMatrix[1][1];
		var lamda1 = -( Math.sqrt(c*c - 2*a*c + 4*b*b + a*a) - c - a ) / 2;
    var lamda2 =  ( Math.sqrt(c*c - 2*a*c + 4*b*b +...