奥会津只見 イラスト美術館 参考ビデオ：Image And Curved-Image Primitives (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。
後日、Udemyのコースを購入したので、使用している画像はそこからダウンロードしたものです。アセットフォルダには、大きさ（1024*768ピクセル画像）を揃えた自分のイラストも追加しました。
いわゆるこういう感じのを作るようです。上から見た図で、後ろ側の真っ直ぐな平面が、前回の画像１の回で作ったa-imageプリミティブ。手前の弓形の画像が、円弧の幅（width of ark）が同じ1mで、縦にも横にも歪みがないように計算した後のa-curvedimageプリミティブ。
a-curvedimageプリミティブは、ユーザの周りを回るような画像を作成します。カメラの周囲に配置された曲面画像は、各ピクセルがユーザから同じ距離にあるため、読みやすさの点で優れています。継ぎ目もなく滑らかで、複雑なレイアウトには角度をつけた平面よりも使用に適しています。 画像が歪まないようにするためには、画像のアスペクト比に対するheight、radius、theta-lengthの属性をきちんと設定する必要があります。 1.2.0 > PRIMITIVES > <a-curvedimage> 属性 デフォルト値 → 今回 height 1 → ？ radius（r） 2 → ？ theta-length（θ） 270 → ？
a-curvedimageプリミティブを使用すると、ユーザの周りを囲む画像を作成できる。a-imageプリミティブと同じ原理、同じ方法が適用できるが、そのプロセスは少し異なる。
DOMセレクタ形式のIDを使って画像を参照すると、デフォルトの位置に画像が現れる。
試しに自分のイラスト画像でもやってみたのがこちら。
a-curvedimageプリミティブは、内側にテクスチャがマッピングされた両端面のない円柱（cyrinder）に過ぎない。
その中心角は、theta-length属性（デフォルト値は270度）で設定できる。半径（radius）のデフォルト値は2なので、分かりやすいようにコードにそれぞれ追加しておく。
1.2.0 > PRIMITIVES > <a-curvedimage> Attributes
A-Frameを使ってみたい４ 回転で見たように、Y軸周りの回転について、Yが正の値（上向き）の場合、右手の法則により、反時計回りに回転する。
https://www.quora.com/profile/Shubham-Agrawal-141/answers
θ（theta length）の値を90、180、270と増やしていくと、円柱がそれぞれの角度に対応して、Y軸に対し反時計回りに増えていくのが確認できる。
theta-length=”90″ 
theta-length=”180″ 
theta-length=”270″
a-curvedimageプリミティブの開始位置（デフォルトは0）を変更したい場合は、 theta-start属性を使う。
今、theta-lengthの値を90度に設定した状態で、
弓形の画像を、平面の画像と同じ向きで、手前に配置したい場合は、先ずtheta-start属性を180度に設定し、
そこからa-curvedimageプリミティブのθ（theta-length=”90″）の半分、つまり45を引く必要がある。
180-45=135度が、θの開始位置となる。
ここでは、a-curvedimageプリミティブに、positionコンポーネントを追加（position=”0 1.5 0″）し、少し上に移動しておく。
<a-curvedimage src="#img-02"
theta-length="90"
theta-start="135"
radius="2"（A-FrameのDefault Value）
position="0 1.5 0">画像が歪まないようにするためには、画像のアスペクト比に対するheight、radius、theta-lengthの属性をきちんと設定する必要があります。 1.2.0 > PRIMITIVES > <a-curvedimage> 属性 デフォルト値 → 今回 height 1 → ？ radius（r） 2 → ？ theta-length（θ） 270 → 90
今、a-curvedimageプリミティブが横に長く歪んでいるので、a-imageプリミティブで行ったように、正確なサイズを求めたい。
そのためには、もう少し高度な計算で半径（r）の値を求める必要があるが、幸いなことに、handymath.comのようなオンライン計算機を利用することができる。
handymath.com > The Complete Circular Arc Calculator
幾何学では、この弓形の線の部分を円弧と呼び、これは、a-curvedimageプリミティブで言えば、画像として見えている円柱の一部分に相当する。その幅を、円弧の幅（Width of arc）または、全円としてみた場合、弦（chord）と呼ぶ。
この円弧計算機は、任意の2つの値を与えると、円弧のあらゆる部分の計算をしてくれる。
まず、すべての要素の単位をメートルに設定し、小数点以下の値を3にする。これで、ミリメートル単位でも正確な値を得ることができる。
半径を求めるために、円弧の幅に1メートルを入力、これは今ここで必要なデフォルト値である。円弧に対する角度を90度とする。これは、theta-lengthに設定した中心角の値に等しい。
Calculateをクリックすると、入力値と計算値が色分けされた状態で表示される。半径（radius of arc）の値は0.707mとなることが分かる。
<a-curvedimage src="#img-02"
theta-length="90"
theta-start="135"
radius="0.707"
position="0 1.5 0">画像が歪まないようにするためには、画像のアスペクト比に対するheight、radius、theta-lengthの属性をきちんと設定する必要があります。 1.2.0 > PRIMITIVES > <a-curvedimage> 属性 デフォルト値 → 今回 height 1 → ？ radius（r） 2 → 0.707 theta-length（θ） 270 → 90
弦 (数学)：初等幾何学における円の弦（げん、英:chord）は、その円上に両端点を持つ線分を言う。 subtended：≪数≫（弦・辺などが）（弧・角）に対する 参考： 数学も英語も強くなる！ 意外な数学英語 Unexpected Math English
今、ここで弓形の画像を正しい比率で表示するには、画像が歪まないように、その高さの値を求める必要がある。そのためには、a-imageプリミティブに使用した計算式を使用するが、若干の調整が必要になる。
a-curvedimageの場合、計算式の幅にあたるのは、1mの幅の方ではなく、円弧となるため、円弧の長さとして得た値（＝1.111）を使用する必要がある。
計算式で高さを求めると、0.833メートル。
画像の高さ(m) ＝画像の幅(m) ：この場合は円弧の長さ/ 画像の幅(px) * 画像の高さ(px)
＝ (1.111 meters / 1024 pixels ) x 768 pixels
heightのHTML属性を加え、値を入れてみると、画像が歪んでいないことが確認できる。
<a-curvedimage src="#img-02"
theta-length="90"
theta-start="135"
radius="0.707"
height="0.833"
position="0 1.5 0">画像が歪まないようにするためには、画像のアスペクト比に対するheight、radius、theta-lengthの属性をきちんと設定する必要があります。 1.2.0 > PRIMITIVES > <a-curvedimage> 属性 デフォルト値 → 今回 height 1 → 0.833 radius 2 → 0.707 theta-length 270 → 90
S（円弧）= r（半径） * θ（角度） 元の画像のアスペクト比を保ったまま、heightの値を求めるには、半径rや角度θを計算し、円弧S（length of arc）を求める必要があります。 1.2.0 > PRIMITIVES > <a-curvedimage> > Fine-Tuning 試しに、A-FeramのサイトにあるS（円弧）の式にも数値を入れてみました。円弧が分かるとheightを出せるんですね。 S（円弧）= r（半径） * θ（角度）＝ π/2 * 0.707 ＝ 1.111
ここで、横比を保ちながら、scaleコンポーネントを利用して、弓形の画像の幅を変換する準備が整った。
XYZ軸のデフォルト値を3メートルに変更すると、平面の画像に合わせて、弓形の画像を期待通りに拡大できる。
円弧の幅を確認するため、このシーンにa-boxプリミティブを追加して参照する。
a-boxプリミティブの色は赤、不透明度は0.5、幅3、高さ0.1、奥行き3、ポジジョンは0 1.5 -1.5。
これにより、このa-curvedimageプリミティブの円弧の幅のデフォルト値が、1メートルであることが確認できる。
このようにしてプリミティブを拡大・縮小し、必要なサイズへ簡単に変換することができる。
a-curvedimageプリミティブの属性にwidthがないので、こうやって揃えるということなのでしょうか。
やはり数学が入ってくると難しい。。理解に苦しんだ過程の紙屑たち。
