Earth Viewer

HTML5 - Earth Viewer - CodeCanyon

Earth Viewer his title this type of HTML5/3D This time I will review,made by fjordside, HTML5/3D is sold at a price of $10 in CodeCanyon.

3d // 3d globe // 3dglobe // earth // geo // geographic // geolocation // globe // html5 // jquery // location // realtime // webGl // world //

Created	3 May 12
Last Update	27 June 13
Compatible Browsers	Firefox, Safari, Opera, Chrome
Software Version	HTML5
Files Included	JavaScript JS, HTML, CSS

More Info...Earth Viewer ..

3D interactive globe – no flash required

Update – 26.06.13

• Component now uses latest version of THREE.js (57)

Update – 15.06.13

• Better support for wgs84 coordinates
• Added feature, autoRotate – makes the globe rotate on load
• Added feature, externalURL – allows hotspot links to leave the globe

One happy Customer says:

“The EarthViewer was just what I was looking for” – Colin Munday | Partner, The Web Workshop.

Another happy Customer says:

“This is crazy! Component works without any flaws. Bought it, copied it to server, implemented it as a iframe to joomla website. All in 15 minutes. Changed content and points on globe also in no-time!

Once again thanks for such a great component!”

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 p on your website into a interactive 3D Globe, using this simple syntax:

 $('p#insert_p_id_here').doGlobe({ radius: 200 }); 

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

 <p 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. </p><!-- /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

• Three.js
• dat-gui
• Stats.js
• Tween.js
• Detector
• jQuery
• jQuery.mouseWheel.js
• colorBox

Download LinkEarth Viewer - CodeCan ..