Map

function Map(selector)
{
    this.stats = new Stats();

    // Align top-left
    this.stats.domElement.style.position = 'fixed';
    this.stats.domElement.style.left = '0';
    this.stats.domElement.style.top = '0';
    this.stats.domElement.style.zIndex = '10000';

    document.body.appendChild( this.stats.domElement );

    this.container = $(selector);

    this.container.width(this.container.parent().width());
    this.container.height(this.container.parent().parent().height() - 61);

    this.windowHalfX = this.container.width() / 2;
    this.windowHalfY = this.container.height() / 2;

    this.mouseX = this.windowHalfX;
    this.mouseY = this.windowHalfY;

    this.generateScene();
    this.generatePlane();
    this.generateBuildings();
    this.generateLights();
    this.addToDOM();

    this.animate();

    var t = this;

    this.container.click(function(e)
    {
        //t.click(e);
    });

    this.container.mousemove(function(e)
    {
        t.mouseMove(e);
    });

    this.container.mousedown(function(e)
    {
        t.mouseDown(e);
    });

    this.container.mouseup(function(e)
    {
        t.mouseUp(e);
    });
}

Map.prototype.generateScene = function()
{
    this.projector = new THREE.Projector();

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

    this.camera = new THREE.PerspectiveCamera(75, this.container.innerWidth() / this.container.innerHeight(), 1, 10000);
    this.camera.position.x = -500;
    this.camera.position.y = 100;
    this.camera.position.z = 300;

    this.camera.lookAt({x: -300, y: 0, z: 0});

    this.scene2.add(this.camera);
}

Map.prototype.generatePlane = function()
{
    var img = new THREE.MeshBasicMaterial({
        color: 0xCCCCCC,
        map: THREE.ImageUtils.loadTexture('images/map.jpg'),
        overdraw: true
    });

    img.map.needsUpdate = true;

    this.plane = new THREE.Mesh(new THREE.PlaneGeometry(2048, 2048, 16, 16), img);

    this.scene.add(this.plane);
}

Map.prototype.generateBuildings = function()
{
    //this._addCube(10, 10, 10, 0, 0, 0);
}

Map.prototype._addCube = function(w, h, d, x, y, z)
{
    var geometry = new THREE.CubeGeometry(w, h, d);
    var material = new THREE.MeshLambertMaterial({
        color: 0xffffff,
        shading: THREE.FlatShading,
        overdraw: true
    });

    var cube = new THREE.Mesh(geometry, material);

    cube.position.x = x;
    cube.position.y = y + (h / 2);
    cube.position.z = z;

    this.scene2.add(cube);
}

Map.prototype.generateLights = function()
{
    var ambientLight = new THREE.AmbientLight(Math.random() * 0x10);

    this.scene2.add(ambientLight);

    var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
    directionalLight.position.x = Math.random() - 0.5;
    directionalLight.position.y = Math.random() - 0.5;
    directionalLight.position.z = Math.random() - 0.5;
    directionalLight.position.normalize();

    this.scene2.add(directionalLight);

    var directionalLight = new THREE.DirectionalLight(Math.random() * 0xffffff);
    directionalLight.position.x = Math.random() - 0.5;
    directionalLight.position.y = Math.random() - 0.5;
    directionalLight.position.z = Math.random() - 0.5;
    directionalLight.position.normalize();

    this.scene2.add(directionalLight);
}

Map.prototype.addToDOM = function(selector)
{
    //this.renderer = new THREE.WebGLRenderer();
    this.renderer = new THREE.CanvasRenderer();
    this.renderer.setSize(this.container.innerWidth(), this.container.innerHeight());

    this.renderer.autoClear = false;

    this.container.append(this.renderer.domElement);
}

Map.prototype.getMousePosition = function(event)
{
    var parentOffset = this.container.offset();
    var clickX = event.pageX - parentOffset.left;
    var clickY = event.pageY - parentOffset.top;

    var vector = new THREE.Vector3((clickX / this.container.innerWidth()) * 2 - 1, - (clickY / this.container.innerHeight()) * 2 + 1, 1);
    this.projector.unprojectVector(vector, this.camera);

    var ray = new THREE.Ray(this.camera.position, vector.subSelf(this.camera.position).normalize());

    var intersect = ray.intersectObject(this.plane);

    return intersect[0].point;
}

Map.prototype.mouseDown = function(event)
{
    this.mouseStartPosition = this.getMousePosition(event);
}

Map.prototype.mouseUp = function(event)
{
    var pos = this.getMousePosition(event);

    var width = Math.abs(this.mouseStartPosition.x - pos.x);
    var depth = Math.abs(this.mouseStartPosition.z - pos.z);

    var middleX = (pos.x + this.mouseStartPosition.x) / 2;
    var middleZ = (pos.z + this.mouseStartPosition.z) / 2;

    this._addCube(width, 10, depth, middleX, 0, middleZ);
}

Map.prototype.mouseMove = function(event)
{
    var parentOffset = this.container.offset();

    var clickX = event.pageX - parentOffset.left;
    var clickY = event.pageY - parentOffset.top;

    this.mouseX = clickX - this.windowHalfX;
    this.mouseY = clickY - this.windowHalfY;
}

Map.prototype.animate = function()
{
    this.stats.begin();
    this.render();
    this.stats.end();
}

Map.prototype.render = function()
{
    this.camera.position.x += (this.mouseX - this.camera.position.x) * 0.05;
    this.camera.position.y += ((-this.mouseY - this.camera.position.y) * 0.05);

    this.camera.lookAt(this.scene.position);

    this.renderer.clear();

    this.renderer.render(this.scene, this.camera);
    this.renderer.render(this.scene2, this.camera);
}