deck.glでFPSのように3Dポリゴンを表示する

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

deck.glのFirstPersonViewを用いることで、一人称視点での画面表示を行うことができます。高さデータをもつGeoJSONデータなどがある場合、実際に見上げるような視点での可視化を行うことができます。

なお、公式サイトのサンプルには、FirstPersonViewを使って点群データを一人称視点で表示する例や、360度動画を一人称視点で表示する例が掲載されています。

この記事ではOpenStreetMapをベースマップとし、高さデータを持つ東京都23区のベクタータイルを読み込んで3DPolygonとして表示した地図を一人称視点で表示しています。

サンプルコード

解説

基本的には、生成したFirstPersonViewのオブジェクトをdeckコンポーネントのviewプロパティに渡して上げるだけです。

注意点としては、initialViewStateが使えないのでviewStateプロパティを使うため、ビューステート(カメラ)の管理を自身で行う必要があります。

具体的には、onViewStateChangeプロパティにコールバックを設定し、画面操作が行われた際のビューステートの更新を行う必要があります。

※ initialViewStateとくに問題なく使えました。なので上記の処理は必要ありません。