Earth Viewer (3D)

Follow on CodeCanyon
CodeCanyon portfolio
Button Twitter
Button Facebook

The Earth

Around the world in 0,5 seconds… – without plugins!

With this amazing HTML5 globe, you can travel around the world, in a matter of secondes.
Show your points-of-interest with ease.

Spin it, Zoom it, Enjoy it :-)

Give your visitors the freedom to easily browse through any point in the world, by spinning, clicking and zooming this beautiful interactive globe.

  • Spin it with the mousebutton.
  • Zoom in or out with the mousewheel.
  • Click points-of-interest for lightbox with more info.
  • + 30 configurable options

Highlight any point in the world, with this HTML5 component.

Convert any div on your website into a interactive 3D Globe, using this simple syntax:

    $('div#insert_div_id_here').doGlobe({
        radius: 200
    });
    

Add clickable points-of-interest(poi) to the globe, using standard divs:

    <div id="poi_A" class="poi hidden" data-lat="32" data-long="124">
        This content will pop up into a lightbox, 
        when the spot on the globe is clicked.
    </div><!-- /POI_A -->
    

compatability

This component uses Three.js for the 3d rendering, utilizing webGl.

“WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer’s Graphics Processing Unit (GPU).”
source: http://en.wikipedia.org/wiki/WebGL

Desktop Browser Implementation

  • Mozilla Firefox – WebGL has been enabled on all platforms that have a capable graphics card with updated drivers since version 4.0.[9] Mozilla Firefox 8.0 and newer versions use Cross-Origin Resource Sharing (CORS) to control all WebGL cross-domain textures.
  • Google Chrome – WebGL has been enabled on all platforms that have a capable graphics card with updated drivers since version 9. Google Chrome 13.0 and newer versions use Cross-Origin Resource Sharing (CORS) to control all WebGL cross-domain textures.
  • Safari – Safari 5.1 and newer versions installed on Mac OS X Lion and Mac OS X Snow Leopard implemented support for WebGL, which is disabled by default.
  • Opera – WebGL has been implemented in Opera 11 and 12 alpha (pre-release) snapshots.
  • Internet Explorer – Microsoft has not announced any plans to support WebGL. The Chrome Frame and IEWebGL plugins provide options to add support for WebGL to Internet Explorer 6.0 and newer versions.

source: http://en.wikipedia.org/wiki/WebGL

This component is tested on the following:

  • Mac – FireFox 11.0
  • Mac – Safari 5.1.5
  • PC – FireFox 11.0
  • PC – Chrome 18.0.1

Credits

Thanks to the brilliant minds scattered around the internet, this project was made possible.

Thankyou :-)

Download Earth Viewer (3D)

Leave a Reply

Your email address will not be published. Required fields are marked *