Magicode logo
Magicode
3
5 min read

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://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/

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

Marine Traffic

飛行機の情報があれば、船舶情報もある。これをみてると、空も海も広いんだが、狭いんだがよくわからなくなります。

https://www.marinetraffic.com/ja/ais/home/centerx:139.7/centery:35.3/zoom:8

Travelscope

旅行に役立つ情報を地図上に表示して見ることができる。(ビザなしで旅行できる国、各国の人口など) 日本のパスポートだと、151カ国に、ビザなしorトラベルビザで旅行が可能。

https://www.markuslerner.com/travelscope/

Zoom Earth

ほぼリアルタイムの衛星画像を見ることができる。

https://zoom.earth

Blitzortung

カミナリが発生している場所を地図上で表示するサービス。アメリカの中西部とか竜巻・雷のイメージがあるけど、本当にそうなんだなぁと思える。

https://map.blitzortung.org

AstriaGraph

地球の周りに飛んでいる浮遊物(人工衛星・ロケットの破片などなど)がみれるサイト

http://astria.tacc.utexas.edu/AstriaGraph/

3D Solar System Simulator The sky live

太陽系にある惑星・小惑星の軌道や彗星を3Dシミュレーションできる。どの日付を見たいかを設定することも可能。

https://theskylive.com/3dsolarsystem

HE 3D Network Map

世界のインターネットBACKBONEをみることができる3Dマップ。アイコンをクリックすると情報を簡単にみることができる。

https://he.net/3d-map/

Discussion

コメントにはログインが必要です。