A-Frameを使ってみたい12　画像３　3D/AR34

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

後日、Udemyのコースを購入したので、使用している画像はそこからダウンロードしたものです。アセットフォルダには、大きさ（1024*768ピクセル画像）を揃えた自分のイラストも追加しました。

　はじめに

a-curvedimageプリミティブの特徴は、各ピクセルが同じ距離にあるため、読みやすさに優れていることで、複雑なレイアウトには、平面に角度をつけたものより使用に適している。今回は、3つの画像を使ったレイアウトを試す。

3つの画像を使ったレイアウトは、いわゆるこういう感じのを作るようです。
上から見た状態で、一番奥の平面はA-Frameを使ってみたい10 画像１で配置したa-imageプリミティブ。
真ん中の曲面がA-Frameを使ってみたい11 画像２で配置したa-curvedimageプリミティブ。
一番手前で、3枚でアーチを形成しているのが、今回作成する、3枚のa-curvedimageプリミティブ。

ビデオで言っているcomplex layoutsというのが、どの程度のものかが想像がつかないのですが、曲面の方が見やすそうなのは理解できる。

　3枚画像のレイアウト

これから作っていくレイアウトは、カメラ周りの円形の部分で、３枚の中心角が180度、各画像の中心角は50度。

後ほど幅を必要な値にスケーリングできるように、円弧の幅は1mをデフォルトに設定する。これは円筒の直径に相当するため、半径は0.5mとなる。

<!-- curved image primitive 1024*768px 3 IMG layout->
      <!-- Angle Subtended by Arc 円弧の角度　= 180度 -->
      <!-- Angle Subtended by each image 各円弧の角度　= 50度 -->
      <!-- width of Arc 円弧の幅　DIAMETER = 1m -->
      <!-- Radius of Arc 円弧の半径　= 0.5m -->
      <a-curvedimage
        src="　  　"
        theta-length="50"
        theta-start="  "
        radius="0.5"
        height="     "
        position="0 1.5 0"
        scale="3 3 3">
      </a-curvedimage>

　１枚目の a-curvedimage（向かって右の画像）

theta-startを90度に設定し、DOMセレクタ形式のIDを使って右に置く画像（img-03）を参照。

<!-- curved image primitive 1024*768px -3 IMG layout -->
      <!-- Angle Subtended by Arc 円弧の角度　= 180度 -->
      <!-- Angle Subtended by each image 各円弧の角度　= 50度 -->
      <!-- width of Arc 円弧の幅　DIAMETER = 1m -->
      <!-- Radius of Arc 円弧の半径　= 0.5m -->
      <a-curvedimage
        src="#img-03"
        theta-length="50"
        theta-start="90"
        radius="0.5"
        height="     "
        position="0 1.5 0"
        scale="3 3 3">
      </a-curvedimage>

まず向かって右の画像を作成中。プリミティブの開始位置のtheta-start属性のデフォルトは0。
1.2.0 > PRIMITIVES > <a-curvedimage>

　正確な高さを求めるために、まず円弧の長さを求める

右側の画像の正しい高さの値を出すためには、円弧の長さを求める必要がある。

円弧の計算機に戻って、新しい行を追加（Add Rows）。
handymath.com > The Complete Circular Arc Calculator

半径0.5、画像の円弧に対する角度を50度にすると、円弧の長さは、0.436m。

　高さは画像の解像度の高さと幅の比から求める

円弧の長さの値を使って画像の高さが求められる。

画像の高さ(m) ＝画像の幅(m) ：この場合は円弧の長さ/ 画像の幅(px) * 画像の高さ(px)
　　　　 　　＝ (0.436 meters / 1024 pixels ) x 768 pixels
　　　　 　　 ＝ 0.327

前回の曲線のコードをコピーしたまま（height=0.833）だと、縦長に歪んでいる。今回計算で出した0.327をheightに代入すると、右に置いた画像の縦横比が正しく表示されるようになった。
（このあと画像も右画像（src="#img-03"）に変えました。）

<!-- curved image primitive 1024*768px -3 IMG layout -->
      <!-- Angle Subtended by Arc 円弧の角度　= 180度 -->
      <!-- Angle Subtended by each image 各円弧の角度　= 50度 -->
      <!-- width of Arc 円弧の幅　DIAMETER = 1m -->
      <!-- Radius of Arc 円弧の半径　= 0.5m -->
      <a-curvedimage
        src="#img-03"
        theta-length="50"
        theta-start="90"
        radius="0.5"
        height="0.327"
        position="0 1.5 0"
        scale="3 3 3">
      </a-curvedimage>

　２枚目、３枚目の a-curvedimage（向かって中央の画像と左側の画像）

作成したの画像をコピーし、円弧周りに並べていく。今度は中央に配置する画像（img-04）を参照。

開始位置のtheta-startは、180-25（theta-lengthの半分の値）= 155に設定することで中央に配置する。

右端の画像（img-05）のtheta-startは、270-50（この場合はtheta-lengthの値である50）= 220度。

<!-- 中央の画像 -->
      <a-curvedimage
        src="#img-04"
        theta-length="50"
        theta-start="155"
        radius="0.5"
        height="0.327"
        position="0 1.5 0"
        scale="3 3 3">
      </a-curvedimage>
<!-- 左側の画像 -->
      <a-curvedimage
        src="#img-05"
        theta-length="50"
        theta-start="220"
        radius="0.5"
        height="0.327"
        position="0 1.5 0"
        scale="3 3 3">
      </a-curvedimage>

ポジションでコントロールするのでは無く、プリミティブの開始位置で設定するのか。。

　各画像の幅を確認

a-boxを置いて今まで配置したそれぞれの画像の幅の確認をしてみる。

平面を配置したa-imageプリミティブ、曲面1枚のa-curvedimageプリミティブ、そして今回配置した3枚のa-curvedimageのどれもが、全く同じ3m幅であることがわかる。

平面はA-Frameを使ってみたい10 画像１で配置したa-imageプリミティブ。
真ん中の曲面がA-Frameを使ってみたい11 画像２で配置したa-curvedimageプリミティブ。
一番手前で、3枚でアーチを形成しているのが、今回作成する、3枚のa-curvedimageプリミティブ。

このように、a-imageとa-curvedimageプリミティブをカスタムシーンで使用する際には、数学や実用的な方法を使って、簡単にそして歪むことなく変形させることができる。

<!-- 円弧の幅の確認用のa-boxプリミティブ -->
      <a-box color="#AA0000"
             opacity="0.5"
             width="3"
             height="0.1"
             depth="3"
             position="0 1.5 -1.5">
      </a-box>

　中心角を各60度でやってみる

それぞれの画像を50度にして間を開けている意図があまりわからなかったので、60度にしてそれぞれの隙間を無くして出来るかをやってみることに。

イラスト3枚合わせての円弧の角度と幅は変わらず、自分で描いた同じイラストを3枚並べることに。ポジションは、今まで作成したもののY軸上で上に配置されるよう、position=”0 2.6 0″。

<!-- curved image primitive 1024*768px 3 IMG layout->
      <!-- Angle Subtended by Arc 円弧の角度　= 180度 -->
      <!-- Angle Subtended by each image 各円弧の角度　= 60度 -->
      <!-- width of Arc 円弧の幅　DIAMETER = 1m -->
      <!-- Radius of Arc 円弧の半径　= 0.5m -->
      <a-curvedimage
        src="#tadami"
        theta-length="60"
        theta-start="90"
        radius="0.5"
        height="     "
        position="0 2.6 0"
        scale="3 3 3">
      </a-curvedimage>

ちなみにこちらは前回の50度角と同じ高さheight="0.327"の場合の見た目。

円弧の長さを求める。

円弧の長さは、0.524mなので、高さは0.393m。

画像の高さ(m) ＝画像の幅(m) ：この場合は円弧の長さ/ 画像の幅(px) * 画像の高さ(px)
　　　　 　　＝ (0.524 meters / 1024 pixels ) x 768 pixels
　　　　 　　 ＝ 0.393

<!-- curved image primitive 1024*768px 3 IMG layout->
      <!-- Angle Subtended by Arc 円弧の角度　= 180度 -->
      <!-- Angle Subtended by each image 各円弧の角度　= 60度 -->
      <!-- width of Arc 円弧の幅　DIAMETER = 1m -->
      <!-- Radius of Arc 円弧の半径　= 0.5m -->
      <a-curvedimage
        src="#tadami"
        theta-length="60"
        theta-start="90"
        radius="0.5"
        height="0.393"
        position="0 2.6 0"
        scale="3 3 3">
      </a-curvedimage>

コピーして、中央に置く2枚目、左側に置く3枚目の画像を配置。

中央に置く2枚目のtheta-startは、180-30（右の画像から相対的に考えると90+60）=150度。

左側に置く3枚目のtheta-startは、270-60（中央の画像から相対的に考えると150+60）=210度。

<!-- 中央の画像 -->
      <a-curvedimage
        src="#tadami"
        theta-length="60"
        theta-start="150"
        radius="0.5"
        height="0.393"
        position="0 2.6 0"
        scale="3 3 3">
      </a-curvedimage>
<!-- 左側の画像 -->
      <a-curvedimage
        src="#tadami"
        theta-length="60"
        theta-start="210"
        radius="0.5"
        height="0.393"
        position="0 2.6 0"
        scale="3 3 3">
      </a-curvedimage>

あってそうな気はするけど、どうだろう。。

次回はプリミティブについてもう少し掘り下げていくようです。