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

A-Frameを使ってみたい3 ポジション 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″)

A-Frame Inspectorの画面

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

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

 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。ページを再読み込みすると、カメラやボックス、シリンダが同じ位置に表示されるのは、このデフォルトの値に戻るため。

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

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の画面では、何かがいる。
A-Frame Inspectorの画面

 side=“double”なしの場合

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

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

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

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

 side=“double”ありの場合

side=“double”あり。

<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)になる。

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

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

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

A-Frame Inspectorの画面

 チャイルドの円を動かす

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にする。

A-Frame Inspectorの画面
     <!-- 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>

 親子の相対的な位置関係

黄色い円もグレーの円も綺麗に緑色のパネルに対称に並んでいたが、緑色のパネルを動かすと、そのチャイルドのグレーの円だけが、緑色のパネルの動きについてくる。

緑色のパネルのYの値を変えてみる。緑のパネルとグレーの円が上に動き、黄色い縁は変わらず。

緑色のパネルのZの値を変えてみる。緑のパネルとグレーの円が奥に移動し、黄色い縁は変わらず。

このような場合、黄色の円も同様に動かしたいのであれば、黄色の円のpositionをその都度更新する必要がある。


次回は回転から。

コメントを残す

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