はじめに
おじさん、ハイテンション！(^^)/ よなよな続きをフォローしています。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 誤字訂正。次のステップメモを追加。