オリジナルポストカードは”こちら”で好評発売中!

A-Frameを使ってみたい4 回転 3D/AR26

参考ビデオ:Rotation And Relative Rotation (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。

 今回はこの状態からスタート。

<a-box color="#689F38"
       width="4"
       height="2"
       depth="0.2"
       position="0 1 -7">
      <a-circle color="#333333"
                side="double"
                position="2 0 0">
      </a-circle>
</a-box>
<a-circle color="#FFC107"
          side="double"
          position="-2 1 -7">
</a-circle>
<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double">
</a-cylinder>
グレーの円の方から見た視点

 回転のプラスの方向も右手座標系のルールから

すべてのエンティティは、positionコンポーネント同様、rotationコンポーネントを持ち合わせていて、デフォルトはrotation=”0 0 0″。

各軸に対して、どちらがプラス方向の回転になるかを確認するにも、やはり右手座標系のルールを使うことができ、Y軸に関しては、下記のリンク先の図で確認できる。

https://www.quora.com/profile/Shubham-Agrawal-141/answers

親指をY軸のプラス方向に向けた際に、親指以外の指が握るように曲がる方向がプラスの回転になる。A-Frameのエンティティの角度の単位は、degree(度)。

ここで、X軸周りにプラス方向の回転を知りたい場合は、親指をX軸方向に向ける。他の指が手前に回るこの方向がプラスになる。グレーの円をプラス方向に30度回転させる。

X軸周りにプラス方向へ30°回転

グレーの円をプラス方向に90度回転させた場合。

X軸周りにプラス方向へ90°回転

 親と子のエンティティの相関関係(rotation)

子のエンティティは、positon、rotation、scaleなど、すべてのタイプの変形を、親のエンティティから引き継ぐ。

その為、親である緑色パネルに回転を与えると、親(緑のパネル)と子(黄色の円)の両方が、回転するのが確認できる。

緑色のパネルをX軸周りにプラス方向へ30°回転
緑色のパネルをX軸周りにプラス方向へ90°回転

 Z軸周りについても確認

今度は、シリンダの方にアトリビュートを追加してみる。Z軸を考える場合、親指を自分の方向に向けた時、他の指が曲がる方向は、反時計回りになる。Zの値を増やしていく。

rotation=”0 0 0″の状態
<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double"
            rotation="0 0 0">
</a-cylinder>
シリンダをZ軸周りにプラス方向(反時計回り)へ30°回転
<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double"
            rotation="0 0 30">
</a-cylinder>
シリンダをZ軸周りにプラス方向(反時計回り)へ90°回転
<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double"
            rotation="0 0 90">
</a-cylinder>

 Y軸周りについても確認

今度は、Y軸周りにマイナスの方向に90度回転させてみる。

親指を下に向けることで回転方向が確認でき、Y軸を中心に、時計回りにまわる。

シリンダをY軸周りにマイナス方向へ30°回転
<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double"
            rotation="0 -30 90">
</a-cylinder>
シリンダをY軸周りにマイナス方向へ90°回転
<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double"
            rotation="0 -90 90">
</a-cylinder>

 positionコンポーネントも追加

シリンダを1m上に移動してみる。(position=”0 1 0″)

<a-cylinder color="#616161"
            height="2"
            radius="2"
            segments-radial="6"
            open-ended="true"
            side="double"
            position="0 1 0"
            rotation="0 -90 90">
</a-cylinder>

次回はスケールです。

コメントを残す

メールアドレスが公開されることはありません。