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

公開日:2019-04-03
最終更新:2019-04-03
※この記事は外部サイト(https://labor.ewigleere.net/2019/04/03/afr...)からのクロス投稿です

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;で。

それから、dur1000(ms)が最小?それ以下だとアニメーションが動いている気配が感じられませんでした……。

あとこれは公式ドキュメントに書いてありましたが、複数のanimation属性を指定する場合はアンダースコア2つを使ってanimation__XXXXXという形式で記述するように、とのことです。

以上3つが個人的に躓いた点でしょうか。

参考

記事が少しでもいいなと思ったらクラップを送ってみよう!
10
+1
アルム=バンドのQrunch

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする