​

//Globe vars

var container = document.getElementById("globeCanvas");

var globe, projector, globeRadius = 350, renderer;//350

var mouse = { x: 0, y: 0 }, mouseOnDown = { x: 0, y: 0 },

rotation = { x: 0, y: 0 },

        target = { x: Math.PI*3/2, y: Math.PI / 6.0 },

        targetOnDown = { x: 0, y: 0 },

distance = 1000,

distanceTarget = 1000,//10

curZoomSpeed = 0,

    FAR = 200,

​

zoomSpeed = 2,//20

scene = new THREE.Scene(),

camera = new THREE.PerspectiveCamera(45,container.offsetWidth/container.offsetHeight,1,1000);

​

//Globe objects

var objects = [];

​

//Maths

var PI_HALF = Math.PI / 2;

​

init();

animate();

​

function init(){

​

    renderer = new THREE.CanvasRenderer( { canvas: globeCanvas } );

    renderer.shadowMapEnabled = true;

    renderer.setSize(container.offsetWidth,container.offsetHeight);

    container.addEventListener('mousedown', onMouseDown, false);

    renderer.setClearColor(0x000000,1);

    scene.add(camera);

    //projector

    projector = new THREE.Projector();

​

    var material = new THREE.MeshNormalMaterial();

    var sphere =  new THREE.SphereGeometry(  globeRadius, 36, 36);

​

    globe = new THREE.Mesh( sphere, material );

    globe.position.set(0, 0, 0);

    scene.add(globe);

​

    container.addEventListener('mousedown', onMouseDown, false);

    window.addEventListener('resize', onWindowResize, false);

    container.addEventListener('mouseover', function() {

        overRenderer = true;}, false);

    container.addEventListener('mouseout', function() {

        overRenderer = false;}, false);

  createCircles();

​

}

​

function zoom(delta) {

​

    distanceTarget -= delta;

    distanceTarget = distanceTarget > 800 ? 800 : distanceTarget;

    distanceTarget = distanceTarget < globeRadius+1 ? globeRadius+1 : distanceTarget;

}

​

function onMouseWheel(event) {

    event.preventDefault();

    if (overRenderer) {

        zoom(event.wheelDeltaY);

    }

    return false;

}

​

function onWindowResize( event ) {

    camera.aspect = container.offsetWidth / container.offsetHeight;

    camera.updateProjectionMatrix();

    renderer.setSize( container.offsetWidth, container.offsetHeight );

    scene.updateMatrixWorld();

}

​

​

function onMouseMove(event) {

    mouse.x = - event.clientX;

    mouse.y = event.clientY;

​

    var zoomDamp = distance/1000;

​

    target.x = targetOnDown.x + (mouse.x - mouseOnDown.x) * 0.005 * zoomDamp;

    target.y = targetOnDown.y + (mouse.y - mouseOnDown.y) * 0.005 * zoomDamp;

​

    target.y = target.y > PI_HALF ? PI_HALF : target.y;

    target.y = target.y < - PI_HALF ? - PI_HALF : target.y;

}

​

function onMouseUp(event) {

    container.removeEventListener('mousemove', onMouseMove, false);

    container.removeEventListener('mouseup', onMouseUp, false);

    container.removeEventListener('mouseout', onMouseOut, false);

    container.style.cursor = 'auto';

}

​

function onMouseOut(event) {

    container.removeEventListener('mousemove', onMouseMove, false);

    container.removeEventListener('mouseup', onMouseUp, false);

    container.removeEventListener('mouseout', onMouseOut, false);

}

​

​

function animate() {

    requestAnimationFrame(animate);

    render();

}

​

function render() {

    zoom(curZoomSpeed);

​

    rotation.x += (target.x - rotation.x) * 0.1;

    rotation.y += (target.y - rotation.y) * 0.1;

    distance += (distanceTarget - distance) * 0.3;

​

    camera.position.x = distance * Math.sin(rotation.x) * Math.cos(rotation.y);

    camera.position.y = distance * Math.sin(rotation.y);

    camera.position.z = distance * Math.cos(rotation.x) * Math.cos(rotation.y);

    camera.lookAt(globe.position);

​

    renderer.render(scene, camera);

}

​

​

function onMouseDown(event) {

​

    event.preventDefault();

​

    container.addEventListener('mousemove', onMouseMove, false);

    container.addEventListener('mouseup', onMouseUp, false);

    container.addEventListener('mouseout', onMouseOut, false);

​

    mouseOnDown.x = - event.clientX;

    mouseOnDown.y = event.clientY;

​

    targetOnDown.x = target.x;

    targetOnDown.y = target.y;

​

    container.style.cursor = 'move';

    scene.updateMatrixWorld();

​

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;

    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

​

    var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 1 );

    projector.unprojectVector( vector, camera );

  console.log("objects length : "+objects.length);

  console.log("id obj 1 : "+objects[0].id);

  console.log("id obj 2 : "+objects[1].id);

​

    var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    var intersects = raycaster.intersectObjects( objects);

​

    if ( intersects.length > 0 ) {

    console.log("touched");

    }

}

​

​

function createCircles(){

  var lat = new Array(33,41);

  var lon = new Array(65,20);

  for (var i=0; i<lat.length; i++){

    var circle = new THREE.CircleGeometry(10, 10, 0, Math.PI * 2);

    var circleMaterial = new THREE.MeshBasicMaterial({color: 0xFD9800, overdraw : true});

    circleMaterial.side = THREE.DoubleSide;

    circleMesh = new THREE.Mesh(circle, circleMaterial);

    circle.dynamic = true;

    circle.verticesNeedUpdate = true;

    circleMesh.dynamic = true;

    circleMesh.verticesNeedUpdate = true;

​

    var heigth = 5;

//  take the lat lon from the data and convert this to 3d globe space

    var Alon = lon[i] - 90;

    var Alat = lat[i];

    var Aphi = Math.PI/2 - Alat * Math.PI / 180;

    var Atheta = 2 * Math.PI - Alon * Math.PI / 180;

    circleMesh.position.x = Math.sin(Aphi) * Math.cos(Atheta) * (globeRadius+heigth);

    circleMesh.position.y = Math.cos(Aphi) * (globeRadius+heigth);

    circleMesh.position.z = Math.sin(Aphi) * Math.sin(Atheta) * (globeRadius+heigth);   

​

    circleMesh.lookAt(globe.position );

    globe.add(circleMesh);

    objects.push(circleMesh);

  }

}

​