2D template

with orbitControls, XZgrid, info

by wayne6172

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,...