360°画像をサイト内に埋め込む①

2017年04月17日(月) 2,977 vi

360°画像をサイト内に埋め込む①

RICOH THETA(リコーシータ)のおかけで360°の写真が撮れるようになったので、
なんとかWEBサイトにうまい感じに埋め込みたいなぁと、考えていました。


関連記事「VRに手をだしてみる」

RICOH THETAのオフィシャルサイトに撮影した画像をアップすれば、
サイトに埋め込む用のソースがでてきますが、これだとVRゴーグルなどで見れない…
また、このオフィシャルサイト、個人でアップはできるものの、アップした本人でもダウンロードができない仕様…。
画質はいいのですが、どうにも使い勝手がわるい…(スミマセン)

Post from RICOH THETA. – Spherical Image – RICOH THETA

そこで見つけたのが、「Google VR View」。
Googleさんが360度対応メディア(画像や動画)などをWebサイトに埋め込むために提供してくれているツールです。


「Google VR View」の使い方など公式


「Google VR View」ダウンロード

ためしに実験的に使ってみた!
こんな感じになった。

だがしかし…うまく表示がされない ><;!
特に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°画像をサイト内に埋め込む① 2,977 vi  記事:yukimaru

VRの最新記事