A-Frameで静止画のVRコンテンツを作成する

RICOH THETA SC + WebVRの記事の続き。 RICOH THETAで撮影した360度パノラマ画像を複数枚使用してのコンテンツ作成を試みました。 条件として、

• 画面中央にカーソルを固定表示(常に画面中央にある)
• a-sphere要素にカーソルを当てて一定時間経過すると、リンク先に移動
• a-sphere要素にカーソルを当てる前後でカーソルを拡大・縮小のアニメーションを付与
  1. カーソルを当て始めるとカーソルが縮小していく
  2. カーソルをa-sphere外に持って行ってフォーカスが外れると元の大きさに戻る
  3. a-sphereをクリックしてリンク先コンテンツに移動したら、元の大きさに戻る

といったことを実現しました。 これも前回記事に書きましたが、バージョン0.9.0の記事が少なく、公式ドキュメントもAPIのキーは書いてあるものの値が書いてないので「このプロパティに対して何を書けば良いのか」が分からず、四苦八苦しました……。

        <!-- カーソル (焦点時アニメーション付き)-->
        <a-entity camera look-controls position="0 1.6 0">
            <a-entity cursor="fuse: true;"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.025"
                material="color: #blue; shader: flat"
                animation__click="property:scale;startEvents:click,mouseleave;easing:easeOutQuart;dur:1000;from:0.1 0.1 0.1;to:1 1 1;"
                animation__focus="property:scale;startEvents:fusing;easing:easeInCubic;dur:1500;from:1 1 1;to:0.1 0.1 0.1;">
            </a-entity>
         </a-entity>

0.9.0ではa-animationが削除され、a-entity内にanimation属性を記述することでアニメーションを実現します。 特に「フォーカスが当たったら」「フォーカスが外れたら」のようなアニメーションの開始イベントのプロパティstartEventsが課題。 上記条件の2.3.(元の大きさに戻る)はstartEvents:click,mouseleave;で。1.はstartEvents:fusing;で。 それから、durは1000(ms)が最小？それ以下だとアニメーションが動いている気配が感じられませんでした……。 あとこれは公式ドキュメントに書いてありましたが、複数のanimation属性を指定する場合はアンダースコア2つを使ってanimation__XXXXXという形式で記述するように、とのことです。 以上3つが個人的に躓いた点でしょうか。

参考

• A-FRAME で簡単 全天球画像 表示を試す – Qiita
• 新しいWebVRフレームワークA-Frame入門 – Qiita
• A-Frameをさわってみた – Qiita
• Animation – A-Frame
• Documentation | anime.js