VRコンテンツが簡単に実装可能!Google VR View(グーグルブイアールビュー)と360度画像でWebページにVRコンテンツを実装する

2019年5月12日

今更感が漂いますが、VRコンテンツが熱いです。
据え置きゲーや映像コンテンツで多用されるVRですが、ロケーションをPRしたい「結婚式場」「レストラン」「観光」などのWebサイトでもどんどん導入されています。
ひと昔前は「krpano」というプラグインがシェアを占めていたようなのですが、「Google VR View」というプラグインが登場し、
今後は「Google VR View」が業界を席巻、牽引して行くのではないかと思います。
前置きはこのくらいにして、早速デモを実装してみたいと思います。
導入に際し、以下のページを参考にさせていただきました。
参考:
Google VR Viewで360度コンテンツを表示する方法

導入方法のご紹介

まずは画像の用意

今回使用させていただく画像はこちら。

湖に出来た白い道…どういう状況でしょうか?モーゼ的な感じ?
とりあえずAdobe Stockからこちらの画像を入手しました。
Adobe StockはFotoliaを吸収して、巨大なフォトストックサイトに進化しました。
現在ではAdobe Stock以外にも無償で高品質なフォトストックサイトが多く存在します。
木になる方は探してみてください。
※写真が安売りされる時代…複雑な心境ですが仕方ないですね。

コードの記述

表示させたいWebページのヘッダーに以下のコードを記載します。
<script src=”//storage.googleapis.com/vrview/2.0/build/vrview.min.js”></script>
これでGoogleAPIからGoogle VR ViewのJSを引っ張ってきます。

次にVRコンテンツを表示させたい場所に、以下のコードを記述します。
<div id=”vrview”></div>
超シンプル!もちろんID名は任意です。

続いてJSコードを記述します。
<script>
window.addEventListener(‘load’, onVrViewLoad);
function onVrViewLoad() {
var vrView = new VRView.Player(‘#vrview’, {
image: ‘./images/vr/img0001_03.jpg’,
width: ‘100%’,
height: ‘500px’,
is_stereo: true
});
}
</script>
これで表示されるはず…

表示されているか…いざ確認!

出ない。。。
あるサイトでは「ちょくちょく発生するエラー」とか書いてあります。
画像データが良くないのか?パスはあっている…
うーん、わからん。

引き続き調査します。