A-Frameを使ってみたい４　回転　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度回転させる。

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

　親と子のエンティティの相関関係（rotation）

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

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

　Z軸周りについても確認

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

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

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

<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軸を中心に、時計回りにまわる。

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

<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>

次回はスケールです。