Google VR Viewで360度コンテンツにHotspotを追加する方法

360度コンテンツを簡単に取り入れることが出来るGoogle VR View。

今回は、コンテンツにHotspotを追加してみました。
Hotspotとは、円形のボタンのようなもので、
イベントを追加することが出来ます。

Google VR Viewで360度コンテンツを表示する方法はこちらから。

Hotspotを追加する

vrView.addHotspot()でHotspotを追加します。

<script>
  vrView.addHotspot('任意のID', {
    pitch: 0, // 上方向の位置。-90,90の範囲で指定。
    yaw: 0, // 横方向の位置。-180,180の範囲で指定。
    radius: 0.05, // 円の半径。
    distance: 1 // カメラからの距離。
  });
<script>

Hotspotにイベントを追加する

イベントはon()を使って追加します。

<script>
  vrView.on('click', function(e) {
    if (e.id == '任意のID') {
      // 処理。
    }
  });
</script>

さらに、ページがロードされたらコンテンツを表示して、
Hotspotとイベントを追加するようにしてみます。

*Hotspotをクリックしたら、コンソールにテキストを表示する処理を追加しています。

<script>
  function onLoad() {
    vrView = new VRView.Player('#vrview', {
      image: '../img/tyopress.jpg',
      width: '100%',
      height: '100%',
      is_autopan_off: true,
    });

    vrView.on('ready', onVRViewReady);
    vrView.on('click', onVRViewClick);
  }

  function onVRViewReady(e) {
    vrView.addHotspot('clickspot', {
      pitch: 0, // 上方向の位置。-90,90の範囲で指定。
      yaw: 0, // 横方向の位置。-180,180の範囲で指定。
      radius: 0.05, // 円の半径。
      distance: 1 // カメラからの距離。
    });
  }

  function onVRViewClick(e) {
    if (e.id == 'clickspot') {
      console.log('Hotspotをclickしました！')
    }
  }

  window.addEventListener('load', onLoad);
</script>

デモページはこちらから。

処理の部分を変更すれば、
色々なイベントを組み込めちゃいます。

公式サイトには、Hotspotを駆使したギャラリーが紹介されています。
こんな風にHotspotを使って、
道案内や建物の紹介などに取り入れてみるのも良さそうですね！