How to create WebGL Earth with Geodata showing Locations by Tooltip
The first idea was to run this code thru CanvasRender, sadly CanvasRender does not support THREE.Texture, so, impossible to show Tooltips.
I had to switch to WebGL. It took a while to finish this puzzle code, I spent lot of time till I figured out that THREE.Texture is not displayed in Firefox :))
So, what this demo does is:
1. Creates a 3D Globe Sphere with texture.
2. Add Geodata on Sphere surface.
3. Using INTERSECTED intersects the objects on surface and shows the Tooltip ( works only in WebGL ).
Demo link webGL( try Chrome for WebGL!):
http://maran-emil.de/experiments/demo13/index.html
Demo link Canvas:
http://maran-emil.de/experiments/demo13/index_canvas.html
Update:
When I start to code on this demo I had in mind the Flash 3D Version available on GeocodEarth Website ( http://www.geocodearth.com/ ), before was ( http://www.twittearth.com/), where xml data is readed from Twitter/Flickr and than displayed by location Latitude and Longitude of a Point. Of course this demo can be improved, an xml/json File can be readed with jQuery and then, all data can be attached to different Geo Data Points on Sphere surface.
There is also a hope to have Tooltips in CanvasRender mode, well, not in Canvas drawed but as distinct div layers or modalwindow. Using jQuery(document).mousemove(e) the demo can get mouse position as e.pageX, e.pageY values for Top and Left and then, on INTERSECT.object event is easy to place a layer exactly over the Geo Data Point Dot/Marker using absolute position as style attribute for Tooltip layer. CanvasRender output is not so good as WebGLRenderer but the advantage for Canvas is that every browser support it.
References for Demo:
1. For creating a Globe Sphere, a good reference is Canvas Geometry Earth Demo from mrdoob website:
http://mrdoob.github.com/three.js/examples/canvas_geometry_earth.html
Another good example of canvas Globe:
http://mrdoob.github.com/three.js/examples/canvas_lines_sphere.html
2. For converting data point to a coordinate on the sphere, adding Geodata on Sphere, I use the function latLongToVector3() from smartjava.org:
http://www.smartjava.org/content/render-open-data-3d-world-globe-threejs
http://www.smartjava.org/content/html5-render-urban-population-growth-3d-world-globe-threejs-and-canvas
3. Tooltip idea came from stemkoski demo:
http://stemkoski.github.com/Three.js/Mouse-Tooltip.html