2D template

with orbitControls, XZgrid, info

by Leoooo

HTML

<div id="info">AABB Test
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();document.body.appendChild(stats.dom);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//mrdoob.github.io/stats.js/build/stats.min.js';document.head.appendChild(script);})()

//var baardphase = [];

class broadphase{
  constructor(pointx,pointy,num){
  this.pointx=pointx;
  this.pointy=pointy
  this.num=num;
  this.isBeg=true;
  this.isEnd=false;
  }
   
}

class AABB {
  constructor(pos, vel, halfSize) {
  	this.center = pos.clone();
    this.vel = vel.clone();
    this.halfSize = halfSize.clone();
    this.min = pos.clone().sub (this.halfSize);
    this.max = pos.clone().add (this.halfSize);
    this.box = new THREE.Mesh (new THREE.PlaneGeometry(this.halfSize.x * 2, this.halfSize.y * 2, 0), new THREE.MeshBasicMaterial());
    
    scene.add(this.box);
    this.box.position.copy(this.center);
  }
  update(dt) {
    this.center.add(this.vel.clone().multiplyScalar(dt));
    
    if (Math.abs(this.center.x) > 40-this.halfSize.x) this.vel.x *= -1;
    if (Math.abs(this.center.y) > 40-this.halfSize.y) this.vel.y *= -1;
    
    this.max.addVectors(this.center, this.halfSize);
    this.min.subVectors(this.center, this.halfSize);
    this.box.position.copy(this.center);
  }
  collide(other) {
    // boolean returning
 		
    // x-axis
    if (Math.abs(this.center.x - other.center.x) >= this.halfSize.x + other.halfSize.x)
    	return false;
    // y-axis
    if (Math.abs(this.center.y - other.center.y) >= this.halfSize.y + other.halfSize.y)
    	return false;
   return true;
    
  }
}




var camera, scene, renderer;
var bbs = [];
var bp=[];
var collide=[];
init();
animate();

function init() {

  renderer = new THREE.WebGLRenderer();

  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0x888888);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
 ...