homework 3p

Rect-circle collision

by Alan Lin

HTML

<div id="info">Rectangle-Circle Collision
  <br>click to move circle
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></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 rectangle, circle;
var mouse = new THREE.Vector2();

init();
animate();

function checkIntersect(rect, circle) {
  var rad2 = circle.r * circle.r;
  var max = rect.max.clone().sub(circle.c);
  var min = rect.min.clone().sub(circle.c);
  
  if (max.x < 0) {
  	if (max.y < 0)
    	return (max.x*max.x + max.y*max.y < rad2);
    else if (min.y > 0)
    	return (max.x*max.x + min.y*min.y < rad2);
    else
    	return (Math.abs(max.x) < circle.r);
  } else if (min.x > 0) {
  	if (max.y < 0)
    	return (min.x*min.x + max.y*max.y < rad2);
    else if (min.y > 0)
    	return (min.x*min.x + min.y*min.y < rad2);
    else
    	return (min.x < circle.r);
  } else {
  	if (max.y < 0)
    	return (Math.abs(max.y) < circle.r);
    else if (min.y > 0)
    	return (min.y < circle.r);
    else
    	return true;
  }
}

function init() {
  scene = new THREE.Scene();

  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 10);
  camera.position.z = 10;
  scene.add(camera);

  var gridXZ = new THREE.GridHelper(50, 10);
  gridXZ.setColors(new THREE.Color(0xff00ff), new THREE.Color(0xffffff));
  gridXZ.rotation.x = Math.PI / 2;
  scene.add(gridXZ);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);

  document.body.appendChild(renderer.domElement);
  window.addEventListener('resize', onWindowResize, false);
  window.addEventListener('mousedown', onDocumentMouseDown, false);

  /////////////////////////////////////////////////
  rectangle = new THREE.Mesh(new THREE.PlaneGeometry(30, 20), new THREE.MeshBasicMaterial({color:0x00ffff}));
  circle = new THREE.Mesh(new THREE.CircleGeometry(5, 20), new THREE.MeshBasicMaterial({
    color: 0xff0000, wireframe:true
  }));
  scene.add(rectangle);
//  rectangle.position.set(11, 3, 0);
  scene.add(circle);
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
 ...