非常にたどり着きにくかったのにスゴく有能なライブラリだったので、今後迷える人が無き用、記事にしました。
結論
https://github.com/akokubo/ThetaViewer
こちらをライブラリとして用いればサクッと導入できた
要件
- Ricoh Theta Sで撮った360°パノラマ写真をWEBにアップしてグリグリしたい。
- スマホ対応必須
- 一画面で何枚かの360°写真を切り替えたい
- クライアントは自前の管理画面から画像をアップする(theta360.com にアップして埋め込みコード貼るとかは無し)。
調査過程
「JS パノラマ」とかでググるとまず当たるのが下記の記事であろう。
http://qiita.com/kingpanda/items/1c3a47765b40d6d62f46
とりあえずデモが全画面だったこと、切り替えの機能が標準でないなら他のものがありそうだな、と思って導入を見送り再調査。
jQueryライブラリを探す
日本語でググってもスマホ対応のものは全然出てこない。
英語でググると有料のはあるけど無料のはちょっと探してみたけど見当たらない。
困ったのでGithubならオープンソースで使えそうなのがあるのではないかとググってみる。
上記ライブラリが見つかったので、導入して問題なく動きました。
とてもお手軽でいい感じです。
このライブラリを使ってみて使い方補足
指定したエレメントDOMの下(ここではサンプル通りに#theta-viewerとする)にパノラマ画像が作られます。
二回目に発動した時もリプレースはされないので、$("#theta-viewer").empty()してから呼び出すようにしましょう。