2D template

with orbitControls, XZgrid, info

by jmcjc5u

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);})()

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.vel.x *= -1;
    if (Math.abs(this.center.y) > 40) 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 = [];

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();
  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 100);
  camera.position.z = 10;

  var geometry = new THREE.Geometry();
  geometry.vertices.push(
    new THREE.Vector3(-40, -40, 0),
    new THREE.Vector3(40, -40, 0),
    new...