RICOH THETA（リコーシータ）のおかけで360°の写真が撮れるようになったので、
なんとかWEBサイトにうまい感じに埋め込みたいなぁと、考えていました。
RICOH THETAのオフィシャルサイトに撮影した画像をアップすれば、
サイトに埋め込む用のソースがでてきますが、これだとVRゴーグルなどで見れない…
また、このオフィシャルサイト、個人でアップはできるものの、アップした本人でもダウンロードができない仕様…。
画質はいいのですが、どうにも使い勝手がわるい…（ｽﾐﾏｾﾝ）
Post from RICOH THETA. – Spherical Image – RICOH THETA
そこで見つけたのが、「Google VR View」。
Googleさんが360度対応メディア（画像や動画）などをWebサイトに埋め込むために提供してくれているツールです。
ためしに実験的に使ってみた！
こんな感じになった。
だがしかし…うまく表示がされない ＞＜；！
特にPCだと画像がなんか変な感じの模様になる…
また、VRゴーグル用に切り替えることができるけど、
画面幅いっぱに表示されなかったり、どうにもうまいことがいかない…orz
Google VR View導入について
必要なファイルをアップ後、iframeで画像ファイルと、iframe用のhtmlを指定すれば、表示される。
<iframe width="100%" height="400" src="/vrview-master/index.html?image=パノラマ画像のパス/xxx.jpg > </iframe>
iframe内に指定できるパラメータ
| image | 360°写真ファイルの場合に使用。[image]かは必ずどちらかは必要 |
|---|---|
| video | 360°動画ファイルの場合に使用。[image]かは必ずどちらかは必要 |
| width | iframeの幅 |
| height | iframeの高さ |
| preview | 画像が読み込まれるまでに表示される仮画像のファイル |
| is_stereo | 動画の場合にステレオモードでの設定 |
| is_debug | trueにするとデバッグモードになります。 |
| is_vr_off | スマホのみで、trueの場合にVRモードにするボタンが消えます。 |
| is_autopan_off | trueの場合に、カメラが左から右に移動するのが止まります。 |
| default_yaw | 最初のカメラの向きの位置を指定できます。 |
他にもホットスポットと呼ばれるメモのような領域を画像内に表示したりなど、機能があります。
余談
理想をいうと以下のような感じになってくれるといいかなぁ…
・PCでは、画像をドラッグで360° 見渡せる。
・スマホなどでは、タッチで360° 見渡せる。
・スマホなどではVRゴーグル用の一眼や二眼などのモードに切り替えられて、VRコンテンツとして楽しむことができる。
上記がなんとか個人レベルでできないかと、画策中です。
360°画像をサイト内に埋め込む① 3,920 vi 記事：yukimaru
VRの最新記事
