投稿日:

Cesium JSの始め方

CesiumJSの始め方

2 はじめの一歩

  • お勧めは Getting Startedからが良いと思います。
  • 本家のgetting startと異なる部分
    • 日本語モードにした
    • ionに登録してなくても表示(keyの部分をコメントアウト)
    • sytleをサイズ指定から、100%表示に
  • このファイルを適当な名前をつけて、httpサーバーで公開して、ブラウザでアクセス
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
  <script>
    <!-- Cesium.Ion.defaultAccessToken = 'your_access_token'; -->
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

2.1 サーバーをrubyでやると楽かも

ruby -rwebrick -e 'WEBrick::HTTPServer.new(:DocumentRoot => "./", :Port => 8000).start'

3 ボタンを設置し、ボタンを押すと東京にカメラをflytoする

3.1 まずはブラウザでコマンドの確認

  • まず東京の上空までマウスなどの操作でもっていきます。
  • デベロッパーツールのconsoleで以下を入力すると現在位置を経度、緯度、高度で取得できます。
viewer.camera.positionCartographic
  • 緯度経度がradianで表示されました
{longitude: 2.4438235206124967, latitude: 0.6225373613176627, height: 137921.4350234892}
  • Homeでflytoさせてみましょう。以下をブラウザのデベロッパーツールのConsoleに入力します。
viewer.camera.flyHome();
  • 次に東京までflytoさせてみましょう。以下をブラウザのデベロッパーツールのConsoleに入力します。
viewer.camera.flyTo({destination : Cesium.Cartesian3.fromRadians(2.4438235206124967, 0.6225373613176627, 150000.0)})

3.2 確認した命令をボタン押したら実行するようにしてみましょう

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <script src="https://cesiumjs.org/releases/1.58/Build/Cesium/Cesium.js"></script>
  <link href="https://cesiumjs.org/releases/1.58/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="width: 100%; height: 100%"></div>
  <script>
    <!-- Cesium.Ion.defaultAccessToken = 'your_access_token'; -->
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
  <script>
    var flyto_tokyo=function() {
      viewer.camera.flyTo({destination : Cesium.Cartesian3.fromRadians(2.4438235206124967, 0.6225373613176627, 150000.0)})
    }
  </script>
  <button id="flyto_tokyo" onclick="flyto_tokyo()">東京へflyto</button>
</body>
</html>

3.3 また追記していきます。

著者: NM Max

Created: 2019-06-17 月 07:34

Validate

投稿日:

CesiumJS関係の動画とか記事書くかも

CesiumJSっていう素晴らしいソフトがあって、美しい地球儀みたいなもの

https://cesiumjs.org/

こんな感じでグリグリできて美しい。今回の仕事の知識でブログへの埋め込みにも成功しました。

やってみたら上手くいった！

宇宙旅行も可能みたいで、月とか太陽も訪問可能で、自分のデータも入れてカスタマイズ出来るみたいです。やり方まだわかってないけど、そこら。

https://cesium.com/docs/tutorials/getting-started/#your-first-app

を読んでもらえば、やり方わかると思います。

素晴らしいですね、数行でこんなのを埋め込んだページつくれちゃうって、本当にすごい！

カメラ操作も非常に簡単にできて、地球を色々なところ飛びまわるとか、WindowsのChromeならGamepad APIに対応していて、Gamepad で操作をカスタマイズも可能。

当然マウスやキーボード操作に対する反応もカスタマイズ可能です。

フライトの記録とかがあれば、それを再現も比較的低い難易度で出来るソフトです。

本当に素晴らしいソフト。