forked from sdrdis/jquery.earth-3d
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (89 loc) · 5.85 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<html itemscope itemtype="http://schema.org/Product">
<head>
<title>jquery.earth-3d.js plugin - draw a 3d spinning earth on canvas with javascript</title>
<meta itemprop="name" content="jquery.earth-3d.js">
<meta itemprop="description" content="Based on the amazing sphere.js plugin of Sam Hasler, jquery.earth3d.js is an open source jquery plugin which will allow you to emulate a 3d earth (or any planet actually) on canvas.">
<meta itemprop="image" content="images/preview.png">
<link rel="stylesheet" href="css/demo.css">
<script type="text/javascript" src="plugins/sphere/requestanimationframe.polyfill.js"></script>
<script type="text/javascript" src="plugins/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="plugins/jquery.ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="sphere-hacked.js"></script>
<script type="text/javascript" src="jquery.earth-3d.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<h1>jquery.earth-3d.js (v0.3-alpha)</h1>
<div class="subtitle">Draw a beautiful 3d spinning earth on canvas</div>
<a href="https://github.com/sdrdis/jquery.earth-3d"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div id="demo">
<div id="description">
<div class="socials">
Share:
<div class="social twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://sdrdis.github.com/jquery.earth-3d/" data-text="jquery.earth-3d.js, draw a beautiful 3d spinning earth on canvas" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<div class="social google">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall" data-annotation="none" data-href="http://sdrdis.github.com/jquery.earth-3d/"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
<h2>Description</h2>
<p>Based on the amazing <a href="https://github.com/SamHasler/sphere" target="_blank">sphere.js plugin</a> of <a href="https://twitter.com/SamHasler" target="_blank">Sam Hasler</a>, jquery.earth3d.js is an open source jquery ui plugin which will allow you to emulate a 3d earth (or any planet actually) on canvas. I also added some functionalities I needed for my pet project.</p>
<p>Here are the main functionalities provided so far:</p>
<ul>
<li>Change the map texture (you can change it to mars for example), along with the tiling</li>
<li>Change the rotation axis (tilt, turn)</li>
<li>Change the size</li>
<li>Change the default rotation speed</li>
<li>Smooth mouse drag: you can rotate the earth with your mouse, it will smoothly return to the normal speed</li>
<li>Render locations by indicating spherical coordinates</li>
<li>Draw paths between these locations</li>
<li>Draw and update flights following paths</li>
<li>Location and flights are clickable and entirely customizable</li>
<li>It works on <a href="mobile.html">mobile</a></li>
</ul>
<h2>Licence</h2>
<p>jquery.earth3d.js is, as the <a href="https://github.com/SamHasler/sphere" target="_blank">sphere.js plugin</a>, under <a href="MIT-LICENSE.txt" target="_blank">MIT licence</a>.</p>
<h2>Authors</h2>
<ul>
<li>Sebastien Drouyer - alias <a href="https://twitter.com/sdrdis" target="_blank">@sdrdis</a> - for this jquery plugin</li>
<li>Sam Hasler - alias <a href="https://twitter.com/SamHasler" target="_blank">@SamHasler</a> - for the <a href="https://github.com/SamHasler/sphere" target="_blank">sphere.js plugin</a></li>
</ul>
<h2>Additional credits</h2>
Roger Cook and Don Shanosky for the plain icon, on <a href="http://thenounproject.com/noun/airplane/#icon-No75" target="_blank">thenounproject</a>.
</div>
<div id="showoff">
<div id="container">
<canvas id="sphere" width="400" height="400"></canvas>
<div id="glow-shadows" class="earth"></div>
<canvas id="flights" width="400" height="400"></canvas>
<div id="locations"></div>
</div>
<div class="choose_example">
Choose example: <select id="example">
<option value="simple">Simple earth</option>
<option value="simple_tilted">Simple tilted earth</option>
<option value="simple_mars">Simple mars</option>
<option value="locations">Earth with locations</option>
<option value="flights" selected>Earth with locations and flights</option>
</select>
</div>
<div class="code">
<a href="#" onclick="$('#example_code').show(); $(this).hide().siblings('a').show(); return false;">Show code</a>
<a href="#" style="display: none;" onclick="$('#example_code').hide(); $(this).hide().siblings('a').show(); return false;">Hide code</a>
<textarea id="example_code" onclick="this.focus();this.select();"></textarea>
</div>
</div>
</div>
</body>
</html>