読者です 読者をやめる 読者になる 読者になる

音楽的でテクノロジー的なブログ

音楽とテクノロジーを愛する、エンジニア1年生なブログ。

A-Frameで視点によるインタラクティブ操作を実現する

A-Frame VR Technology Programming

aframe_sample000

A-Frameネタ第二弾ということで、今回はA-Frameにおけるインタラクティブ操作について取り上げます。

動作環境

項目 内容
OS macOS Sierra 10.12.3
A-Frame 0.3.0
Chrome 55.0.2883.95 (64-bit)

VR空間での操作

スマホでVRコンテンツを楽しむ場合、基本的にスマホをVRゴーグルにセットするため画面をタップすることができません。
先日発表されたGoogleDaydreamその他特殊なVRゴーグルでVR空間上の操作を可能にしているものもありますが、多くのVRコンテンツではいわゆる視点によるクリックを実現しているものがほとんどです。
もちろんWebVRのフレームワークA-Frameでも視点による制御が可能で、A-Frameらしくタグだけで視点による制御を実装することが可能です。

視点によるインタラクティブ操作

今回はデモとして視点によるインタラクティブ操作を簡易的に体験できるページを作成しました。
素っ気ない画面ではありますが、雰囲気はつかめるのではないでしょうか。
aframe-cursor
サンプルページ
サンプルページにアクセスすると画面中央に青色のリングを確認できますが、これがいわゆる視点となっています。
この視点(リング)がオブジェクトに当たるとクリックしたと判定される仕組みです。

サンプルのVR空間には正面に5つのオブジェクトが用意されていますが、それぞれのオブジェクトを一定時間見つめる(照準を合わせる)とクリックイベントが発生し、事前に設定したイベントを開始させることができます。
各オブジェクトに設定したイベントは以下の通り。
なお、画面下側にある2つの立方体のオブジェクトに対してもクリックイベントは発生しますが、各オブジェクトに別途イベントを設定していないため、特に何も変化しません。

プリミティブ イベント
左側の球体 非表示
右側の球体 視点を合わせたときに拡大
上手の球体 リンク先へジャンプ(別のVR空間)
下側2つの立方体 クリックの検知なし

ソースコード

サンプルのソースコードはこちら。

<!DOCTYPE html>

<head>
  <title>A-Frame</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>

<body>

  <a-scene>
    <a-camera position="0 0 0">
      <a-entity cursor="fuse: true; fuseTimeout: 1000"
                       position="0 0 -1" 
                       geometry="primitive: ring"
                       scale="0.03 0.03 0.03" 
                       material="color: blue; shader: flat">
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                               fill="none" from="0.03 0.03 0.03" to="0.001 0.001 0.001"></a-animation>
      </a-entity>
    </a-camera>

    <a-sphere position="-5 2 -7" color="#EF2D5E">
      <a-animation begin="click" attribute="scale" dur="500" easing="ease-in-sine" to="2 2 2"></a-animation>
      <a-animation begin="mouseleave" attribute="scale" delay="500" to="1 1 1"></a-animation>
    </a-sphere>

    <a-sphere position="0 6 -7" color="skyblue" id="sample-obj"></a-sphere>

    <a-sphere position="5 2 -7" color="red">
      <a-animation begin="click" attribute="visible" dur="5000" to="false" repeat="indefinite">
    </a-sphere>

    <a-box position="5 -3 -7" color="skyblue">
      <a-animation attribute="rotation" from="0 0 0" to="0 360 0" repeat="indefinite" easing="linear"></a-animation>
    </a-box>

    <a-box position="-5 -3 -7" color="skyblue">
      <a-animation attribute="rotation" from="0 0 0" to="0 360 0" repeat="indefinite" easing="linear"></a-animation>
    </a-box>


  </a-scene>

  <script type="text/javascript">  
    var clickElement = document.getElementById("sample-obj");
    clickElement.addEventListener("click", function() {
      location.href = "https://thom-i.github.io/aframe/sample-030/";
    },false);
  </script>

</body>

</html>


クリック以外にもアニメーションやJavaScriptによるイベントを設定したため前回よりも少し長くはなっていますが、たった40行ほどでVR空間の構築かつインタラクティブな操作を実現できました。
早速コードの詳細を見ていきましょう。
基本的な部分は前回解説したため、詳細を知りたい方は以下の記事もご覧ください。

keeponrockin.hatenablog.com


A-Frameの読み込み

<head>
  <title>A-Frame</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
</head>

今回もA-FrameでVRコンテンツを作成するため<head>タグ内でA-Frameをインクルードします。
A-Frameのバージョンは 2016/11/08 現在で最新の0.3.0となっています。

カメラ・視点の設定

<a-camera position="0 0 0">
    <a-entity cursor="fuse: true; fuseTimeout: 1000" 
            position="0 0 -1" 
            geometry="primitive: ring" 
            scale="0.03 0.03 0.03" 
            material="color: blue; shader: flat">
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" 
                    fill="none" from="0.03 0.03 0.03" to="0.001 0.001 0.001"></a-animation>
    </a-entity>
</a-camera>

早速ですが今回のメインである視点部分のコード。

Camera

VRシーンに照準を加えるため<a-camera>を定義します。
<a-camera>タグ内部で文字通り<a-entity>としてcursor(カーソル)を設定します。
これによりVRシーンにリング状の視点が出現します。

cursor

cursor="fuse: true; fuseTimeout: 1000"のようにcursorfuseを設定することで、『指定した時間見つめた場合にイベントを発生させる』といった制御が可能になります。
今回はfuseTimeout: 1000として1秒間見つめたときにイベントを発生するよう設定しました。
他のエンティティとして設定したのは以下の通り。

コード 詳細
geometry=“primitive: ring” 視点の形をリング状に
scale=“0.03 0.03 0.03” 視点をあらわすリングのサイズ
material=“color: blue; リングのカラーをblueに指定
shader: flat flatを設定することで光源からの影響を排除
animation

A-Frameでは<a-animation>タグによるアニメーションの設定が可能となっています。
今回は視点によるインタラクティブ操作をより快適にするため、クリックイベントが発生するまでのフィードバックをリングの縮小(アニメーション)で表現しました。
A-Frameではattributescaleを設定することでオブジェクトのサイズを制御することができます。
今回のサンプルで<a-animation>タグに設定した属性はこちら。

属性 詳細
begin=“cursor-fusing” アニメーションの発生するタイミングを指定
cursor-fusingを設定することで視点を合わせた(正確にはcursorfuseの)タイミングでアニメーションが始まります
easing=“ease-in” アニメーションのeasing(緩やかさ)を指定
ease-inはアニメーションが加速していくようなイメージ
fill=“none” アニメーションが発生していないときのサイズを指定
noneではアニメーション終了後に元のサイズに戻る
from, to fromで指定したサイズからtoで指定したサイズまで大きさを変更する


ソースコード後半部分でも各オブジェクトに対してアニメーションを設定していますが、詳細の解説は本題から外れるため今回は割愛します。
<a-animation>タグの機能について詳しく知りたい方は公式のドキュメントを参考にしてみてください。

https://aframe.io/docs/0.3.0/core/animations.htmlaframe.io

VRシーンにリンクを設定する

<script type="text/javascript">  
  var clickElement = document.getElementById("sample-obj");
  clickElement.addEventListener("click", function() {
    location.href = "https://thom-i.github.io/aframe/sample-030/";
  },false);
</script>

A-Frameで構築したVRシーンにリンクを貼り付ける方法として今回はJavaScriptを使いました。
大まかに解説するとsample-objのIDを設定したオブジェクトにlocation.hrefでリンクを設定し、イベントの発火タイミングとしてclickを設定しています。
今回はリンクとしてA-Frameで作成した簡易的なVRシーンを設定しました。
このようにリンクを設定することで別のVR空間に飛ぶことができるため、様々な活用方法が期待できます。

さいごに

以上がA-Frameを使ったインタラクティブ操作の開発方法です。
インタラクティブな操作やアニメーション、そしてJavaScriptを組み合わせることでA-Frameでの開発の幅が大きく広がるので、興味のある方はぜひ試してみて下さい。

参考リンク

A-Frame – Make WebVR