読者です 読者をやめる 読者になる 読者になる

カンボジアで働いている人の備忘録

24歳、なんかカンボジアで起業したみたいです(他人事)

360度パノラマ画像を表示できるJavaScriptライブラリまとめ

「360°画像をWEBサイト上で表示させたい!」という要望があったので、色々調べてた。備忘録としてまとめとこうと思う。ちなみにどのライブラリも一切触っておらず、リファレンスを流し読みした程度。サンプルコードをパッと見た印象でまとめた。悪しからず。

A-Frame

aframe.io

たぶんコレで実装すると思う。導入簡単・VR対応・レスポンシブ対応で攻守最強。すごくね?

複雑な部分は全て隠蔽されているため、シンプルかつ分かり易い実装が可能。JavaScript読み込んだら、3行ぐらいマークアップするだけでハイ終了。素晴らしい。集合知の暴力。

このライブラリさえあれば他のはいらない気もするけど、一応他のも紹介しとくね。

Marzipano

www.marzipano.net

私が見た中で一番高機能。レスポンシブな上にぬるぬる動く。でもソースを見る限り、設定項目が多くて実装がかなり大変そう。

360°画像を外部サーバーにアップロードして、その後に自社サイトに埋め込む方式のやつ。YouTubeと思えばわかりやすい。このサイト内のMarzipano Toolからギャラリーを作成して、ライブラリを読み込んで、マークアップして...という手順を踏む必要があるっぽい。

小規模で更新頻度の低い固定コンテンツ、例えば建物案内とかで使うなら強力だけど、それ以外の動的サイトだと導入は難しそうかな。何百件もいちいちギャラリー作って埋め込んでって、手動でやってらんないしな。いつ有料になるとも限らんし。

Pannellum

pannellum.org

シンプルでレスポンシブ対応したライブラリ。難しい設定なしで、他のJavaScriptライブラリと同じように使えそう。自社サーバだけで完結するのもグッド。リファレンスもスッキリしてて読みやすい。

ただしWEBサーバ上でPythonスクリプトを走らせないと動作しないっぽいので、その辺ちょっと複雑そうな感じ。Python使ったことねぇんだよなぁ。

Photo Sphere Viewer

Photo Sphere Viewer

スッキリしてて使いやすそう。しかもレスポンシブ対応。だけどPhoto Sphere Cameraとかいうスマホアプリで撮られた写真にしか対応してないっぽい。

gigazine.net

RICOH THETAとかの全天球カメラで撮った画像は対応してるのか不明。誰か試してください(他力本願

ThetaViewer

GitHub - theta360developers/ThetaViewer: RICOH THETA like equirectangular projection panorama HTML5 viewer

日本人が作成したライブラリ。日本語対応のドキュメントが揃っているので、導入は簡単そう。一応スマホのスワイプ操作にも対応。でも最終更新が3年前なのが少し気になるところ。

機能自体は超シンプルで、本当にただただ360度画像を表示するためだけのもの。ズームボタン等のUIは一切なし。

ThView.js

ThView.js - JavaScript Spherical Image Viewer

これも日本人が作成したライブラリ。ThetaViewerよりも軽量で、導入がもっと簡単。その代わりスマホには未対応。使い所が限られる。

さいごに

これからはVR用コンテンツに、WEB上ではA-Frameが流行りそうな予感。使いやすいと広まりやすいし。

Three.jsとかで3Dレンダリングを勉強するハメにならなくて良かった...数学もモデリングもチンプンカンプンなので、マジで助かる。あとは日本語リファレンスが充実すれば完璧。誰か作ってくれ。