1か月前公開・1か月前更新・5 min read

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

JavaScriptWebGLthree.js

はじめに

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/

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