Create rotate.hrml

var camera, scene, renderer, controls, root, projector;

var WIDTH = 600, HEIGHT = 338;
var VIEW_ANGLE = 50, ASPECT = WIDTH / HEIGHT, NEAR = 0.1, FAR = 10000;

var rect, lshape, mouseDown = false;

var objects = [];

init();
addObjects();
addRectangle();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.set(0, 1000, 2500);
    scene = new THREE.Scene();
    root = new THREE.Object3D();
    scene.add(root);

    //
    projector = new THREE.Projector();
    renderer = new THREE.CanvasRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    document.getElementById('canvas3d').appendChild(renderer.domElement);
    
    document.getElementById('canvas3d').addEventListener("mousedown", getPosition, false);
    document.getElementById('canvas3d').addEventListener("mouseup", function(event) { mouseDown = false; }, false);
    document.getElementById('canvas3d').addEventListener('mousemove', function(event) {
        var rect = this.getBoundingClientRect();
        mouseX = event.clientX - rect.left;
        mouseY = event.clientY - rect.top;
    }, false);

    //
    mouseDown = false;
    //controls = new THREE.TrackballControls(camera, renderer.domElement);
    //controls.rotateSpeed = 0.1;
    //controls.addEventListener('change', render);
    
    document.getElementById('canvas3d').addEventListener("mousedown", getPosition, false);



    //document.getElementById('canvas3d').addEventListener('mousedown', onDocumentMouseDown, false);
    //window.addEventListener('resize', onWindowResize, false);
}

function addRectangle() {
    var geometry = new THREE.CubeGeometry(1, 1, 1);
    
    var object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0x676767,
        opacity: 1.0
    }));
    
    var sizeX = 1000, sizeY = 800;

    object.scale.x = sizeX;
    object.scale.y = 10;
    object.scale.z = sizeY;

    root.add(object);
    objects.push(object);
    
    camera.lookAt(object.position);
    
    //Add walls
    
    object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0xffffff,
        opacity: 0.5
    }));
    
    sizeX = 1000;
    sizeY = 400;
    var sizeZ = 10;
    
    object.position.x = 0;
    object.position.y = sizeY/2;
    object.position.z = sizeY;

    object.scale.x = sizeX;
    object.scale.y = sizeY;
    object.scale.z = sizeZ;
    
    root.add(object);
    objects.push(object);
    
    object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0xffffff,
        opacity: 0.5
    }));
    
    sizeX = 1000;
    var sizeZ = 10;
    
    object.position.x = 0;
    object.position.y = sizeY/2;
    object.position.z = -sizeY;

    object.scale.x = sizeX;
    object.scale.y = sizeY;
    object.scale.z = sizeZ;
    
    root.add(object);
    objects.push(object);
    
    object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0xffffff,
        opacity: 0.5
    }));
    
    sizeX = 10;
    sizeZ = 800;
    
    object.position.x = 500;
    object.position.y = sizeY/2;
    object.position.z = 0;

    object.scale.x = sizeX;
    object.scale.y = sizeY;
    object.scale.z = sizeZ;
    
    root.add(object);
    objects.push(object);
    
    object = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
        color: 0xffffff,
        opacity: 0.5
    }));
    
    sizeX = 10;
    sizeZ = 800;
    
    object.position.x = -500;
    object.position.y = sizeY/2;
    object.position.z = 0;

    object.scale.x = sizeX;
    object.scale.y = sizeY;
    object.scale.z = sizeZ;
    
    root.add(object);
    objects.push(object);
}

function addObjects() {
    var separation = 150;
    var amountx = 50;
    var amounty = 50;
    var PI2 = Math.PI * 10;
    var material = new THREE.ParticleCanvasMaterial({
        color: 0x000000,
        program: function(context) {
            context.beginPath();
            context.arc(0, 0, 1, 0, PI2, true);
            context.fill();
        }
    });
    var particle;
    for (var ix = 0; ix < amountx; ix++) {
        for (var iy = 0; iy < amounty; iy++) {
            particle = new THREE.Particle(material);
            particle.position.x = ix * separation - ((amountx * separation) / 2);
            particle.position.y = -10;
            particle.position.z = iy * separation - ((amounty * separation) / 2);
            root.add(particle);
        }
    }
}

function removeEntity(object){
    root.remove(object);
}

function getPosition(event) {
    var x = event.x;
    var y = event.y;

    var canvas = document.getElementById("canvas3d");

    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;
    
    //alert("x:" + ((x / WIDTH) / 1) + " y:" + (-(y / HEIGHT) / 1.2));
    var vector = new THREE.Vector3((x / WIDTH) * 2 - 1, -(y / HEIGHT) * 2 + 1, 0.5);
    
    projector.unprojectVector(vector, camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(objects);

    if (intersects.length > 0) {
        intersects[0].object.material.color.setHex(Math.random() * 0xffffff);
    } else {
        mouseDown = true;
    }
}

function animate() {
    requestAnimationFrame(animate);
    if (mouseDown){
        var spdy =  (HEIGHT / 2 - mouseY) / 100;
        var spdx =  (WIDTH / 2 - mouseX) / 100;
        root.rotation.x = -(spdy/10);
        root.rotation.y = -(spdx/10);
    }
    render();
}

function render() {
    renderer.render(scene, camera);
}