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

roman-tech

テクノロジーはロマンだ。

超お手軽VR開発フレームワーク A-FRAME入門:第3回 モデルに動きをつけてみよう

a-frame vr

前回は、簡単なVR空間を作成しジュウシマツの3Dモデルを静的に配置しました。今回は配置した3Dモデルに動きを与えてみようと思います。

目的

  • 3Dモデルにアニメーションをつける

本記事で学べること

  • アニメーションのつけ方

開発編

さっそく開発に入りましょう。今回は前回作成したジュウシマツのプロジェクトを流用します。ジュウシマツの数が4匹から8匹に増えております。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>sample2-3</title>
    <script src="../lib/aframe.js"></script>
  </head>
  <body>
    <a-scene fog="type: linear; color: #000; far: 25; near: 0">
      <a-assets>
          <img id="tile" src="tile.png">
            <a-asset-item id="jyushimatsu" src="jyushimatsu1.dae">
      </a-assets>
        <a-camera position="0 3 0"></a-camera>
        <a-image src="#tile" rotation="90 0 0" scale="50 50 50" position="0 0 0"></a-image>
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 -90 0"  position="0 3 -10"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="1000" to="0 5 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 -135 0"  position="7.07 3 -7.07"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="1400" to="0 10 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 -180 0"  position="10 3   0"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="200" to="0 3 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 -225 0"  position="7.07 3 7.07"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="1200" to="0 5 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 90 0"  position="0 3 10"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="2000" to="0 10 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 45 0"  position="-7.07 3 7.07"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="600" to="0 5 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 0 0"  position="-10 3   0"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="800" to="0 7 0" repeat="indefinite"></a-animation>
          </a-entity>
          
          <a-entity position="0 0 0">
            <a-collada-model src="#jyushimatsu" rotation="0 -45 0"  position="-7.07 3 -7.07"></a-collada-model>
            <a-animation attribute="position" direction="alternate" dur="1300" to="0 15 0" repeat="indefinite"></a-animation>
          </a-entity>
    <a-sky color="#000"></a-sky>
    </a-scene>
  </body>
</html>

今回追加したアニメーション部分は以下です。

<a-entity position="0 0 0">
<a-collada-model src="#jyushimatsu" rotation="0 -90 0"  position="0 3 -10"></a-collada-model>
<a-animation attribute="position" direction="alternate" dur="1000" to="0 5 0" repeat="indefinite"></a-animation>
</a-entity>

今回はそれぞれのジュウシマツの描画部分をa-entityタグで囲いその中でa-animationタグを使用しています。これで、ジュウシマツに動きを与えることができます。a-animationタグの主なプロパティは以下です。

  • attribute:アニメーションのカテゴリを指定します。今回はpositionなので並行移動に関する移動について記述します。他にも回転移動に関する記述であるrotationなどがあります。
  • to:行き先の座標を指定します。今回の記述では最初にジュウシマツがセットされている箇所から(0, 5, 0)の場所まで移動することを意味しています。
  • direction:アニメーションの方向を指定します。今回はalternate(交互に)を指定しており、ヨーヨーのように初期位置とtoで指定した座標の行ったり来たりを繰り返す動作となります。他にもtoまでいったら即初期位置まで戻ってまたtoまで移動するnormalなどがあります。
  • dur:一回のアニメーションにかかる秒数です(ms単位)。本値が大きければゆっくりと、小さければ素早い動きとなります。
  • repeat:アニメーションの繰り返し回数です。indefiniteを指定すると無限に繰り返します。


さぁ結果を見てみましょう。

マサイ族さながらの動き!!

f:id:roman-tech:20160701182335j:plain:w500


以下にサンプルをアップロードしましたのでぜひジュウシマツのマサイダンスをご覧ください
sample3

いかがでしたでしょうか。javascriptを使わずしても動きを制御できるのはすごいですね。もうちょっと複雑な動きもできそうです。それではまた次回〜。

以下VR開発にオススメです!

© 2016 Tsukasa Horinouchi