Hw4 helper

by 林 羿緯

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="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>
<!-- 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;

init();
animate();

$('#reset').click (function() {
	scene.remove (scene.getObjectByName ('aabb'));  
  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 makeOBB(){
 let minX = 1e3,
    maxX = -1e3;
  let minY = 1e3,
    maxY = -1e3;
   var leftPoint=[],rightPoint=[],downPoint=[],topPoint=[];
  for (let i = 0; i < points.length; i++) {
    if (points[i].position.x < minX){
    	minX = points[i].position.x;
      leftPoint[0] = points[i].position.x;
      leftPoint[1] = points[i].position.y;
    }
    if (points[i].position.x > maxX){
     maxX = points[i].position.x;
     rightPoint[0] = points[i].position.x;
      rightPoint[1] = points[i].position.y;
    }
     
    if (points[i].position.y < minY){
     minY = points[i].position.y;
     downPoint[0] = points[i].position.x;
      downPoint[1] = points[i].position.y;
    }
     
    if (points[i].position.y > maxY){
       maxY = points[i].position.y;
       topPoint[0] = points[i].position.x;
        topPoint[1] = points[i].position.y;
    }
     
  }
  scene.remove (scene.getObjectByName ('obb'));  
	let obb = drawBox (leftPoint,rightPoint,topPoint,downPoint, 'red');
  obb.name = 'obb'
  scene.add (obb)
}
function drawBox(p1, p2, p3, p4, lineColor='blue') {
  var geometry = new THREE.Geometry();
 ...