奥会津只見 イラスト美術館 参考ビデオ：Image And Curved-Image Primitives (A-Frame Tutorial – WebVR) から
自身のUdemyのA-Frameコースのコンテンツの一部を、YouTubeチャンネルに公開されている方の”Learn A-Frame (WebVR)”プレイリストを見ながら進めています。詳しくはリンク先をご覧ください。
テクスチャの回では、シーン内の3Dオブジェクトにテクスチャを加えたり、materialコンポーネントのプロパティを変えてみました。また、より良いパフォーマンスのために、A-Frameのアセットマネジメントシステムを使って、アセットをロードしキャッシュする方法も試してきました。
この回では、a-image（画像）や、a-curvedimage（曲面画像）プリミティブを扱っていきます。
シーンに配置するプリミティブの外観と比較しやすくするため、使用する画像は全て同じ1024＊768ピクセル画像。HTML ID を持つアセットとして準備しておく。
ここでは、A-Frameを使ってみたい７ テクスチャのアップロードで試した方法で、画像（image.zip）をアップロードしています。Udemyのコースを購入したので、画像はそこからダウンロードしたものに、自分のイラストも大きさを揃えて（1024*768ピクセル画像）紛れ込ませました。
（この画像の回ではTextures.zipは必要ありません）
展開し、無事にアップロード完了。画像の名前を短くしておけばよかったとあげてしまってから思う。IDは動画のものより短くしました。
<!-- A-Frameのアセットマネジメントシステム -->
<a-assets>
<img id="img-01" src="images/L09-img-1024x768-flat.jpg">
<img id="img-02" src="images/L09-img-1024x768-curved.jpg">
</a-assets>カスタムシーンで使用できるa-imageプリミティブは、平面上に画像を表示するために使用する。
<a-image> プリミティブを追加し、DOMセレクタ形式でIDを使って画像を参照、potisionコンポーネント（position=”0 1.5 -3″）を追加する。
なぜ画像が歪む？と思ったら、なるほど、デフォルト値がheight、width共に1メートルでした。 1.2.0 › PRIMITIVES > <a-image>
ここで、画像が歪まないように、widthやheightを調整していく必要がある。
ピクセルは、ミリメートル単位で考えるのが正しく、例えば、幅を1.024メートル、高さを0.768メートルとすれば、正しい比率の画像が出来上がる。正しい比率にしてからscaleコンポーネントを使用することで、画像を歪ませることなく変形させることができる。
では、ある決まった値の幅、例えば、画像の幅を3メートルにしたい場合は、widthやheightにどのような値を与えればよいか。また、後で変更したくなった場合はどうすれば良いか。
a-imageやa-curvedimageプリミティブをシーンで使用する場合、何らかの計算を行う必要がある。
ミリメートル単位で考えるのが、単位が一番近いということかな？ １ピクセルは何mm？：１ピクセルが何mmかは解像度によって違うよ。通常パソコンの解像度は72dpiで表示されるから、1インチ（2.54センチ）に72個のドット（ピクセル）があるということになり、1ピクセルが何mmかを求めるなら、計算式は次のようになる。2.54cm÷72＝0.035cm＝0.35mm 抜粋： カメラ知識（1） ＞ １ピクセルは何mm？
画像の幅（ピクセル）を、1メートルに換算する必要がある。
つまりは、幅を1mとした場合の画像の高さを、ピクセルの値から求めるということですかね。。。
widthとheight属性を追加し、1メートルにしておく。これは、a-imageプリミティブのデフォルトの値でもある。
widthが１の時のheightの値を求めるには、下記の数式を使用する。
画像の高さ(m) ＝画像の幅(m) / 画像の幅(px) * 画像の高さ(px)
- 画像の幅(m) / 画像の幅(px)：1メートルが1024個のピクセルで構成されているので、まず1pxの大きさを求めるために、1メートルを1024個で割る。
- * 画像の高さ(px)：次に、その1pxの大きさに、画像の高さの画素数（768px）を掛ける。
計算すると画像の高さ(m)は、0.75メートル。
画像の高さ(m) ＝画像の幅(m) / 画像の幅(px) * 画像の高さ(px) 割り算を先にするから()はいらないのかしら？
ミリメートル数とピクセル数を一致させたい場合は、scaleコンポーネントを使用して、X軸とY軸の両方の値を1.024メートルに設定する。
画像の幅を基準(1m)にして、高さの値を出し、widthとheightで縦横比を保った状態にしておいて、実際の大きさはscaleで調整するということですか。
仮に、画像の幅を3mにしたい場合も問題なく変更できる。
次回は、a-curvedimageプリミティブを扱います。
