HUD display

[pc123]

We should be able to use this technique like in https://github.com/dataarts/armsglobe/blob/master/index.html.

Wrap the div that holds our THREE.js output in a div that will hold our 2D elements. '''

```

'''

Then attach CSS elements to the div programmatically like in https://github.com/dataarts/armsglobe/blob/master/js/markers.js

'''
function attachMarkerToCountry( countryName, importance ){
    //  look up the name to mesh
    countryName = countryName.toUpperCase();
    var country = countryData[countryName];
    if( country === undefined )
        return;

var container = document.getElementById( 'visualization' ); var template = document.getElementById( 'marker_template' ); var marker = template.cloneNode(true);

country.marker = marker; container.appendChild( marker );

marker.countryName = countryName;

marker.importance = importance; marker.selected = false; marker.hover = false;

...
'''

and lastly use this helper method

'''
function screenXY(vec3){
    var projector = new THREE.Projector();
    var vector = projector.projectVector( vec3.clone(), camera );
    var result = new Object();
    result.x = Math.round( vector.x \* (window.innerWidth/2) ) + window.innerWidth/2;
    result.y = Math.round( (0-vector.y) \* (window.innerHeight/2) ) + window.innerHeight/2;
    return result;
}  
'''

More information here:
http://mflux.tumblr.com/post/28367579774/armstradeviz
http://www.html5rocks.com/en/tutorials/casestudies/100000stars/#toc-introduction

> The basic idea: match the CSS3D's matrix transform to THREE's camera and scene, and you can "place" CSS elements in 3D as if it were on top of THREE's scene. There are limitations to this though, for example you won't be able to have text go underneath a THREE.js object. This is still much faster than trying to perform layout using "top" and "left" CSS attributes.

[pc123]

At the very least, add a sprite that corresponds to main menu button

[pc123]

Would be really nice to display portraits of units that are selected