360°の全方向を自由に見渡せるパノラマコンテンツは、GoogleストリートビューのようなWebサービスによって身近なものになってきています。前回の記事「お手軽360°パノラマ制作入門! THETAで撮影しWeb公開に挑戦しよう」では、360°の静止画・動画が撮影できるカメラ「RICOH THETA S」で撮影したパノラマをYouTubeなどのWebサービスで手軽に公開する方法を紹介しました。

今回は、カスタマイズ性の高いWeb用の360°パノラマビューワーの実装方法を、初心者用と上級者用として2通り紹介します。初心者用のものはHTMLで3Dを作成できるライブラリ「A-Frame」を使い、上級者用としてはJavaScript製の3Dライブラリ「Three.js」を用います。

パノラマ静止画を表示する360°パノラマビューワー

次のデモは、本記事で解説するサンプルの完成形です。360°パノラマビューワーで、パソコンではマウスドラッグ、スマートフォンではジャイロセンサー(傾き)で視点を操作できます。手元の端末でお試しください。

Three.jsを使った静止画用パノラマビューワー

本記事で紹介するデモのソースコードはGitHubに公開してます。ソースコードをダウンロードした上で記事を読み進めてください。それではこのサンプルの作り方を解説していきます。

360°パノラマビューワーの仕組み

360°パノラマビューワーの仕組み解説図

360°パノラマビューワーの仕組みは意外と単純です。3D空間上に球体を配置し、パノラマ静止画をテクスチャーとして貼り付けます。その球体の中心にカメラを配置し、ぐるぐると視点を切り替えると360°の全方向を見渡せる360°パノラマビューワーの完成です。

RICOH THETA Sで撮影したパノラマ

▲RICOH THETA Sで撮影したパノラマ

次のページでは、JavaScriptにあまり触れたことのない方でも360°パノラマビューワーが実装できるA-Frameを紹介します。Three.jsで本格的に実装したい方は、3ページへ進んでください。