A-Frameを使ってみたい３　ポジション　3D/AR26

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

　HTMLアトリビュート（属性）を追加して外観を変更

hex値（hexadecimal number：16進数のカラーコード）を使ってボックスに色を入れたりサイズ変える。A-Frameの距離の単位はメートル。ブラウザで見る場合と、VRで実際のサイズで見る場合は見え方が異なるので、注意が必要。

<body> 
    <a-scene>
     <a-box color="#689F38"
            width="7"
            height="2.5"
            depth="0.5">
　　 </a-box>
    </a-scene>
</body>

　円筒を追加し立方体に変更

次に、シリンダプリミティブを使用してシリンダーを追加。新しいオブジェクトはデフォルトの位置（0 0 0）に追加される。各プリミティブが、それぞれ各自のアトリビュートとプロパティを持つ。

多角形の面の頂点の数は、segments-radialアトリビュートで設定できる。
（segments-radial=”6″）

　Open-endedで上下の面を取り除く

open-endedアトリビュートを使用して、値をtrueにすることで、上面と底面を取り除くこともできる。
（open-ended=”true”）

side=“double”がないと、そこにあっても見えなくなるのが、分からないけど興味深い。@aframevr pic.twitter.com/As8nDcMQyY
— akikanke (@ChaAndShiro) November 30, 2021

　side属性で両面が見えるように設定

他のプリミティブ同様に両側から面が見えるようにするには、side属性を double に設定（side=”double”）する。

同じ感じに見えないですが、同じもの。

<body> 
    <a-scene>
     <a-box color="#689F38"
            width="7"
            height="2.5"
            depth="0.5">
　　 </a-box>
     <a-cylinder color="#616161"
                 height="2"
                 radius="2" <!-- 半径 -->
                 segments-radial="6" <!-- 円周のセグメント数 -->
                 open-ended="true" <!-- 上下の面を取り除いて側面のみにする -->
                 side="double"> <!-- 両面が見えるようにする -->
     </a-cylinder> 
    </a-scene>
</body>

各プリミティブて使用できるすべてのアトリビュートやプロパティを覚えておくことは難しいので、そのような場合はA-FrameのWebサイトのドキュメントを参照。

1.2.0 › PRIMITIVES＞<a-cylinder>

　A-Frameは右手座標系

参考ビデオ：
Position And Relative Positioning (A-Frame Tutorial – WebVR)

前回までは、プリミティブを使って基本的なメッシュを作成し、HTMLアトリビュートを加えることで外観を変更した。

カメラを含むすべてのエンティティは、基本的にHTML属性で表現されるデータコンテナであり、positionコンポーネントを持っていて、x y、x軸座標のデフォルト値は0。ページを再読み込みすると、カメラやボックス、シリンダが同じ位置に表示されるのは、このデフォルトの値に戻るため。

この３D空間のエンティティを変換してみる。

A-Frameは、右手座標系なので、カメラをデフォルトから変更していない場合、親指がX軸のプラス方向を示し、人差し指がY軸のプラス方向を、中指がz軸を示し、スクリーンから自分に向かってくる方向が、プラス方向になる。

3D Math Basics (XNA Game Studio 4.0 Programming) Part 1

参考：
3次元CGと座標系
3D 描画の基礎知識

　3Dオブジェクトのポジションを変更する

緑色のboxのZにマイナスの値を入れて、画面から遠ざけてみる。マイナスの値を大きくするほど、画面の奥へと移動する。（position=”0 3 -7″）

ついでに、緑色のボックスを16:9のパネルに見立て、サイズを変更（width=8、height=4.5、depth=0.2）。

　円（a-circle）をチャイルドエンティティとして追加

a-circleのプリミティブをネストして、チャイルドエンティティとして親となるa-boxの中に配置する。

     <!-- box 16:9パネル 親のエンティティ -->
     <a-box color="#689F38" 
            width="8"
            height="4.5"
            depth="0.2">
            position="0 3 -7">
　　　　　　<!-- circle 子のエンティティ -->
      　　　　<a-circle">
             </a-circle>
　　 </a-box>

参考：
ネスト 【nest】 入れ子

デフォルトでは、見えないけど、A-Frame Inspectorの画面では、何かがいる。

　side=“double”なしの場合

positionコンポーネント（0 0 1）を追加して、a-circleのZの値をプラスにすると、緑色のパネルの手前に出てくる。

この角度だと緑色のパネルにくっついて見えますが、１メートル手前なので実際は離れています。

色（#333333）をつけてわかりやすくグレーに。が、しかし、side=“double”がないと、片面しか見えない。

side=“double”がないと、片面しか見えないらしい。(グレーの丸い物体)@aframevr pic.twitter.com/4MTaUJmNU1
— akikanke (@ChaAndShiro) December 1, 2021

Depthのないものは、sideの記述がないと片側しか見えないということかな。

　side=“double”ありの場合

side=“double”あり。

side=“double”あり。(グレーの丸い物体)@aframevr pic.twitter.com/WzbRruX2iZ
— akikanke (@ChaAndShiro) December 1, 2021

<body> 
    <a-scene>
     <!-- box 16:9パネル 親のエンティティ -->
     <a-box color="#689F38" 
            width="8"
            height="4.5"
            depth="0.2">
            position="0 3 -7">
　　　　　　<!-- circle 子のエンティティ -->
      　　　　<a-circle color="#333333"
                       side="double"
                       position="0 0 1">
             </a-circle>
　　 </a-box>
     <a-cylinder color="#616161"
                 height="2"
                 radius="2"
                 segments-radial="6"
                 open-ended="true"
                 side="double">
     </a-cylinder> 
    </a-scene>
</body>

　オーバーラップ

子エンティティa-circle（position=”0 0 1″）は、親エンティティa-box（position=”0 3 -7″）からワークスペースの位置を継承するので、a-circleのZの値は、実際のワールド空間の位置では -6（-7+1）になる。

現時点では、ローカルのpositionの値から空間の変え方が分からないので、A-Frame Inspectorの画面は、a-circle（position="0 0 1"）。

緑色のパネルの厚さは0.2、つまり20cm。中心からの距離に合わせて、a-circleのZの値を0.1に設定すると、a-circleは緑色のパネルの表面と完全に一致する。

オーバーラップ中。面白い🤣
円とパネルの奥行きが同じ場合。この後、円を手前に1cmずらします。@aframevr pic.twitter.com/j4LiTzLrpe
— akikanke (@ChaAndShiro) December 1, 2021

そのため、2つの面が重ならないように、a-circleを緑色のパネルからさらに1cmだけ遠ざける（手前側に移動）。つまり、10cmの0.10ではなく、0.11に設定。

　チャイルドの円を動かす

1.2.0 › PRIMITIVES<a-circle>

今、緑色のパネルは幅が8mなので、その半分は4m、a-circleの半径はデフォルトの値が1で、直径は2m。そのため、a-circleを右（X軸）方向に2m移動させると、a-circleは緑のパネルの右半分の中央に整列する。

     <!-- box 16:9パネル 親のエンティティ -->
     <a-box color="#689F38" 
            width="8"
            height="4.5"
            depth="0.2">
            position="0 3 -7">
　　　　　　<!-- circle 子のエンティティ -->
      　　　　<a-circle color="#333333"
                       side="double"
                       position="2 0 0.11">
             </a-circle>
　　 </a-box>

　シーンに直接円を配置する

今度はboxのチャイルドとしてではなく、シーンに直接、黄色い円を追加してみる。緑色のパネルの座標を参考に、黄色の円のZの値は-7にする。

ここで先ず、緑色のパネルとの位置関係を見るために、黄色の円のXの値を4にしてみる。そうすると、ちょうど黄色の円が、厚さ20cmの緑のパネルをどのようにカットしているか、状態を確認することができる。

　黄色の円を左半分の中央に配置

黄色の円を、緑色のパネルの左半分の中央に移動したい場合、先ず手前に持ってくる必要があるので、オーバーラップを考慮して、Zを手前に11cm移動（-7+0.11= -6.89）する。

Xの値に関しては、グレーの円（position=”2 0 0.11″）のXが2なので、黄色のXの値は0を対称に -2に。

Yの値に関しては、緑色のパネルの座標を参照する必要がある。緑のパネルの座標がposition=”0 3 -7″なので、黄色の円のYの値も3にする。

     <!-- box 16:9パネル 親のエンティティ -->
     <a-box color="#689F38" 
            width="8"
            height="4.5"
            depth="0.2">
            position="0 3 -7">
　　　　　　<!-- circle 子のエンティティ -->
      　　　　<a-circle color="#333333"
                       side="double"
                       position="2 0 0.11">
             </a-circle>
　　 </a-box>
　　 <a-circle color="#FFC107"
               side="double"
               position="2 3 -6.89">
　　 </a-circle>