3Dの地球を表示してみる（WebGL Earth API）

# はじめに
- Google Map や Google Earthが登場したのは、2005年か2006年だったと思いますが、その時はすごい時代になったな、とびっくりしたのを覚えています。
- Google Map については、普段頻繁に使いますしAPIも使用したことはありますが、Google Earthの3D地球情報のほうは、見ているだけで自分で触ったことがありませんでした。
- WebGLも言葉を見かけたことがあるな程度で、いまいちわかっていませんでした。

> WebGL(Web Graphics Library)：Webブラウザで3次元グラフィックス(3DCG)を高速に描画する技術仕様の一つ。

（参考）WebGL入門：https://ics.media/entry/2328/


3Dへの憧れから 3Dの地球の表示について色々調べてみました。
WebGLを簡単に扱えるようにしたJavaScriptのライブラリが、three.jsということですが、今回は、もっと簡単に地球を表示してみたいと思います。

#### WebGLを扱えるライブラリ：three.jsに関する参考情報は、以下のとおり

公式：　https://threejs.org/
サンプル：　https://threejs.org/examples/

おまけ：three.js を使用していて、UIがめちゃくちゃカッコイイと思うもの
https://mrdoob.com/lab/javascript/threejs/css3d/periodictable/



# 3Dの地球を表示してみる（WebGL Earth API）

WebGL Earth APIが、とても手軽にはじめられます。
http://examples.webglearth.com/

アニメーションやマーカーをいれる例もみることができるので、ここからスタートすることができます。Hello Worldからコピペして、そこからいろいろ変更などをしていくことが可能です。また、APIのリファレンスもみれます。毎回、思いますが、スタートするのにハードするが高くないというのは、とてもありがたいことです。
https://sites.google.com/site/webglearth/
![001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/381b0d42-a25a-6733-c283-b0b0bc625aa2.png)

~~~ webgl_earth.html
<!DOCTYPE html>
<html lang="ja">

<head>
    <title>WebGL Earth API: Hello World</title>
    <meta charset="utf-8">
    <style>
      html, body {
        padding: 0; margin: 0;
      }
      #earth_div {
        top: 0; right: 0; bottom: 0; left: 0; position: absolute !important;
      }
    </style>
  </head>

  <body onload="initialize()">
    <div id="earth_div"></div>
    <script src="http://www.webglearth.com/v2/api.js"></script>
    <script>
      function initialize() {
        var earth = new WE.map('earth_div');
        WE.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
          attribution: '© OpenStreetMap contributors'
        }).addTo(earth);
      }
    </script>
  </body>
</html>
~~~


## おまけ：地図や地球を表示して便利な情報を提供するWEBサービスまとめ

調べていると、**地図や地球を表示して便利な情報を提供するWEBサービス** がいろいろ見つかりましたのでまとめておきます。

#### フライトレーダー
これはかなり有名です。スマホアプリをみたときは、すごいと思ったのと同時に、悪用されないの？と単純に思いました。
http://www.flightradar24.com/
![Screenshot_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/7df2ed64-0c6e-1e73-948d-3246d6ebaee6.png)

#### Marine Traffic
飛行機の情報があれば、船舶情報もある。これをみてると、空も海も広いんだが、狭いんだがよくわからなくなります。
https://www.marinetraffic.com/ja/ais/home/centerx:139.7/centery:35.3/zoom:8
![Screenshot_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/78c74b81-cf4f-d06c-815c-6bac55aeec8c.png)

#### Travelscope
旅行に役立つ情報を地図上に表示して見ることができる。（ビザなしで旅行できる国、各国の人口など）
日本のパスポートだと、151カ国に、ビザなしorトラベルビザで旅行が可能。
https://www.markuslerner.com/travelscope/
![Screenshot_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/47505b91-d849-7727-0360-11d7fe2b32a3.png)

#### Zoom Earth
ほぼリアルタイムの衛星画像を見ることができる。
https://zoom.earth
![Screenshot_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/f02764dc-e559-ea9e-89fc-bce1cf541d43.png)

#### Blitzortung
カミナリが発生している場所を地図上で表示するサービス。アメリカの中西部とか竜巻・雷のイメージがあるけど、本当にそうなんだなぁと思える。
https://map.blitzortung.org
![Screenshot_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/a369aba0-7385-482a-704f-549592a41049.png)

#### AstriaGraph
地球の周りに飛んでいる浮遊物（人工衛星・ロケットの破片などなど）がみれるサイト
 http://astria.tacc.utexas.edu/AstriaGraph/
![Screenshot_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/4f005e69-9303-9c4e-13dc-32088e806c55.png)

#### 3D Solar System Simulator　The sky live
太陽系にある惑星・小惑星の軌道や彗星を3Dシミュレーションできる。どの日付を見たいかを設定することも可能。
https://theskylive.com/3dsolarsystem
![Screenshot_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/de5ff5d5-44fa-7630-8b4c-71a12eb8e37b.png)

#### HE 3D Network Map
世界のインターネットBACKBONEをみることができる3Dマップ。アイコンをクリックすると情報を簡単にみることができる。
https://he.net/3d-map/
![Screenshot_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/92890255-bd42-b4ee-8055-72ef7443e5cc.png)


#### Keep Track (2024/10月追記)
地球の軌道上の人工衛星を確認することができる。どの国の衛星なのかがわかるのも面白いし、こんなのが一般人でもみれるのは本当にすごい。
参考URLによると、2024/9/6時点でアクティブな人工衛星は1万345基だそう。宇宙も狭い。
https://keeptrack.space/

![0001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167772/d61abf78-e0bc-dac6-0818-b46adc5ef5bf.png)

参考URL：https://gigazine.net/news/20241001-keep-track/