Hw4 helper

by 蔡 育曄

HTML

<div id="info">OBB 2D<br>Right click add a point
  <br><button id="reset" style="width:10%">reset</button>
</div>
<script src="https://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;
var q1, q2, q3, q4,hitPt = 0;
var pc1 = [], pc2 = [];
init();
animate();

$('#reset').click (function() {
	//scene.remove (scene.getObjectByName ('aabb'));
  scene.remove (scene.getObjectByName ('obb'));  
  
  while(hitPt>0) {
    scene.remove (scene.getObjectByName ('hit'));
    hitPt--;
  }
  
  points.forEach (function(point) {
  	scene.remove(point)
  })
  points=[];
});

function drawAABB() {
	scene.remove (scene.getObjectByName ('aabb'));
  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');
	let aabb = drawBox ([-10,-10],[10,-10],[10,10],[-10,10], 'yellow');
  aabb.name = 'aabb'
  scene.add (aabb);
}

function drawBox(p1, p2, p3, p4, lineColor='blue') {
  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(p1[0], p1[1], 0),
    new THREE.Vector3(p2[0], p2[1], 0),
    new THREE.Vector3(p3[0], p3[1], 0),
    new THREE.Vector3(p4[0], p4[1], 0),
    new THREE.Vector3(p1[0], p1[1], 0));

  var border = new THREE.Line(geometry, new THREE.LineBasicMaterial({
    color: lineColor
  }));
  return border;
}

function findOBB() {
	let avgX = 0, avgY = 0;
  let covM = [
  	[0,0],
    [0,0]
  ];
 
  for (let i = 0; i < points.length; i++) {
  	avgX += points[i].position.x;
    avgY += points[i].position.y;
  }
  
  avgX/=points.length;
  avgY/=points.length;

  for (let i = 0; i < points.length; i++) {
    covM[0][0] += (points[i].position.x-avgX)*(points[i].position.x-avgX);
   ...