はじめに

おじさん、ハイテンション！(^^)/ よなよな続きをフォローしています。CESIUMのtutorial の次のものをなぞりました。全て動きました。

モデルの表示に時間がかかる時がありますが、おおむね想定通り動きます。glitch というプラットフォームを使い、java script の書いてある　index.html を編集すると、それがすぐに反映されて動作を確認できました。便利だなー。

作業メモ

Step 1

チュートリアルのリンクをひらくと、Glitchのテンプレートのプロジェクトが開きます。ここで編集と動作確認ができます。このチュートリアルはここで全て完結します。すごいなー。
sign in もせずに、最後まで行けました。

default で使える asset は以下だそうです。

Cesium World Terrain: 解像度１ｍのデータ
Cesium OSM Buildings: Open Street Mapのデータ
Bing Maps Aerial Imagery: 解像度15cmの航空写真

Step 2

Step 1のときにあったindex.html の const viewer = ... の部分をコメントアウトして、step2 のコードをペーストします。飛行場の建物が表示されます。3D buildings をデフォルトのモデル？から持ってきているようです。

const osmBuildings = viewer.scene.primitives.add(Cesium.createOsmBuildings());

Step 3

続きのコードをGlitch に貼り付けます。赤い点をクリックすると、情報が表示されます。チュートリアルに書いてある通りです。

Step 4

飛行場から飛び立って山々をこえて移動してくところが、アニメーションになりました。
Step 3のコードを貼り付ける前に、const viewer = ... の行はコメントアウトしました。

Step 5

インストラクションに従い、サイトにあるファイル Cesium_Air.glb をダウンロードし、Secium ion の自分のasset に upload します。「3D Model (Convert to glTF)」としてupload しました。モデルが表示されますが、プロペラが回っている、アニメーションだ。

Complete Source Code

最後にindex.html のコードのすべてがあるので、コピペしました。token と asset ID のところだけ書き換えると、飛行機と飛行場のビルのモデルを使って、アニメーションでフライトが再現されました。すばらしい。。。

まとめ

とりあえず、こちらのtutorial もそのまま動いた。CESIUM ion すごいなー。
次のステップは、、、なんだろう。他のデータとか動かしてみたい。建物情報のロード、アニメーションの仕組みを理解して、自分も使ってみたい。日本のデータも調べたい。たくさんあるなぁ。。。もう寝ます。
(2021/05/029 2:23)

次のステップメモ

自分のnpm 環境で動かす。クラウドで動かす。
ファイル形式の調査
日本で動かす
Cesiumの概要のまとめ

みんなやってるのかな。

追記

2021/05/29 誤字訂正。次のステップメモを追加。