【A-Frame】a-linkでVRページ間を移動する

この記事は GMOペパボ Advent Calendar 2018 の26日目の記事です。

...と書きましたが、私はペパボの中の人ではありません!

「26日目??」
「中の人じゃないのにどういうこと??」

の理由に関してはyoku0825さんのエントリーに書かれている通りで、「せっかくなら一緒に26日目の記事書きませんか?」とyoku0825さんにお誘いいただいたので私も参加することになりました。

せっかくグループのアドベントカレンダーに参加するので、今回は2年前(2016年)に参加したGMOグループ新卒技術研修のアウトプット合宿で使ったWebVRのフレームワークA-Frameについて書きます。

動作環境

項目 内容
ブラウザ iOS 12.1 Safari
A-Frame 0.8.2

A-Frameとは?

簡単に説明すると、Mozillaが開発したWebVR(JavaScriptAPI)用のオープンソースフレームワークが「A-Frame」です。
HTMLライクなマークアップのみでVRコンテンツが作成できるのが特徴です。
詳細については以前書いた以下の記事をご覧ください。

qiita.com

<a-link> を使ってVRページ間を移動する

A-Frameには様々な機能が用意されていますが、今回は バージョン0.6.0 で追加された <a-link> を紹介します。
<a-link>(link コンポーネント)を用いることで、VRページ間の移動を簡単に実装することができます。
では早速今回作成したデモページを見てみましょう。

デモページ

上記のVRコンテンツへアクセスすると中央に青色のリングが表示されます。
これがVRコンテンツ上の「カーソル」となります。
オブジェクトに数秒カーソルを合わせることでアニメーションが動作し、クリックイベントが発火します。
PCのChromeでも動作しますが、スマホ(iOSSafariは動作確認済み)からもアクセスしてみてください(ジャイロセンサーと連動します)。
※WebVR非対応のブラウザでは正しく表示されない可能性があります

カーソル以外には正面に丸型の画像が3つ表示されています。
これが別のVR空間となっており、カーソルを数秒合わせることで別のVR空間へアクセスすることができます。
移動先のVR空間の正面上部にも同様にリンクを貼り付けており、そちらにカーソルを合わせることで最初のVR空間へ戻ることが可能です。

このVRコンテンツ(最初のページ)は以下のコードによって作られています。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame Links</title>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene background="color: gray">
        <a-assets>
            <img id="thumb001" crossOrigin="anonymous" src="../image/001.jpg">
            <img id="thumb002" crossOrigin="anonymous" src="../image/002.jpg">
            <img id="thumb003" crossOrigin="anonymous" src="../image/003.jpg">
        </a-assets>
        
        <a-entity link="href: https://thomi40.github.io/aframe/082/sample-image-001/; title: My Homepage 002; image: #thumb001" position="0 1.2 -4"></a-entity>

        <a-link href="https://thomi40.github.io/aframe/082/sample-image-002/" title="My Homepage 001" image="#thumb002" position="-4 1.2 -4"></a-link>

        <a-link href="https://thomi40.github.io/aframe/082/sample-image-003/" title="My Homepage 003" image="#thumb003" position="4 1.2 -4"></a-link>


      <a-entity camera look-controls wasd-controls>
        <a-entity cursor="fuse: true;"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: blue; shader: flat">
            <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
               fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
            <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
               fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
        </a-entity>
      </a-entity>

    </a-scene>
  </body>
</html>

それでは順にコードの詳細を確認していきましょう。

A-Frameの読み込み

A-Frameは以下のようにhead内で読み込みます。

<head>
  <meta charset="utf-8">
  <title>A-Frame Links</title>
  <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
</head>
VRコンテンツのリンク作成

正面に表示されている丸型のリンクは主に以下のコードで実装しています。
linkコンポーネント<a-entity>を用いた表記と<a-link>を用いた表記のどちらでも表現することが可能です。
見ての通りではありますが、hrefでリンク先URLの指定、titleでタイトル、imageで画像、positionVR空間上で表示したい座標を指定しています。

iOS端末でVRページから別のページへ移動すると、移動するごとにアドレスバーが表示されてしまいますが、VRページをブックマークとして「ホーム画面に追加」することでネイティブアプリのようにフル画面でVRコンテンツを楽しむことが可能です。

<a-assets>
    <img id="thumb001" crossOrigin="anonymous" src="../image/001.jpg">
    <img id="thumb002" crossOrigin="anonymous" src="../image/002.jpg">
    <img id="thumb003" crossOrigin="anonymous" src="../image/003.jpg">
</a-assets>

<a-entity link="href: https://thomi40.github.io/aframe/082/sample-image-001/; title: My Homepage 002; image: #thumb001" position="0 1.2 -4"></a-entity>

<a-link href="https://thomi40.github.io/aframe/082/sample-image-002/" title="My Homepage 001" image="#thumb002" position="-4 1.2 -4"></a-link>

<a-link href="https://thomi40.github.io/aframe/082/sample-image-003/" title="My Homepage 003" image="#thumb003" position="4 1.2 -4"></a-link>
カーソルの設定

クリックイベントを発火させるためにカーソルが必要なので、以下のコードで作成しました。
<a-animation> でリングの縮小やクリックイベントに関する設定を記述しています。

<a-entity camera look-controls wasd-controls>
    <a-entity cursor="fuse: true;"
        position="0 0 -1"
        geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
        material="color: blue; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
           fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
           fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
    </a-entity>
</a-entity>

さいごに

簡単にではありますが、今回はA-Frameの<a-link>を用いてVRのページ間を移動する方法について紹介しました。
短くシンプルなコードで簡単に実装できるので、ぜひ試してみてください。
観光地の疑似体験や簡易的なVRゲームにも応用できそうですね。