講義（山本裕樹）

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== A-Frame の基礎 ======

A-Frame とは、WebVR/WebAR を HTML のタグで簡単に作るための Web フレームワークである。
特別なアプリをインストールする必要がなく、Web ブラウザ上で体験できる。

Web ブラウザは Google Chrome を推奨。
===== タグと要素 =====

A-Frame は HTML の仕組みを利用している。
HTML ではタグの中に要素を書いて様々な意味を持たせるのが基本となる。改行は適宜行って構わない。

タグは要素名を ''<'' と ''>'' ではさんだ形をしている。

<code html>
<要素名>
</code>

要素の中身は、''<要素名>'' という開始タグと ''</要素名>'' という終了タグではさんで記述する。

<code html>
<要素名>中身</要素名>
</code>

''<要素名>'' と ''</要素名>'' は同じ要素名のタグのセットであるが、''<要素名>'' のみで中身がない場合もある。

要素の中には別の要素を入れることができる。

<code html>
<要素名1>
  <要素名2>
    <要素名3></要素名3>
    <要素名4></要素名4>
  </要素名2>
 </要素名1>
</code>

----
==== 要素の属性 ====
要素には属性を持たせることができる。
属性を持たせる場合は要素名の後に半角空白を入れて ''属性="属性値"'' のように記述する。

<code html>
<要素名 属性="属性値">
</code>

複数個の属性は空白で区切って記述する。

<code html>
<要素名 属性1="属性値1" 属性2="属性値2" 属性3="属性値3">
</code>

===== A-Frame の要素 =====

==== シーン(scene) ====
シーンは A-Frame におけるオブジェクトを記述する場所である。
シーンにはタグ (要素) でオブジェクトを記述し、そのオブジェクトは 3D 空間の中に配置される。
''<a-scene>'' と ''</a-scene>'' の間に様々なオブジェクトを追加していく。

<code html>
<a-scene>
  <a-sky></a-sky>
  <a-camera>
  <a-cursor></a-cursor>
  </a-camera>
  ...
</a-scene>
</code>

----
==== アセット(assets) ====
アセットとは「資産」という意味で、A-Frame ではアセットで定義した画像や属性などをひとまとめにして管理する仕組みがある。
例えば、複数のオブジェクトに共通の属性を各オブジェクトに記述していくのは非効率なので、アセットを利用するとよい。

----
==== ミックスイン(mixin) ====
IDを指定することで共通の属性を使いまわす方法である。
アセットと組み合わせて利用する。

----
==== スカイ(sky) ====
スカイは 3D 空間において自分を囲む大きな球体のスクリーンを背景とみなすオブジェクトである。
スクリーンの内側に背景画像が張られるため 360° どの方向にも背景として見える。
スカイオブジェクトは ''<a-sky></a-sky>'' で記述する。

^  属性         ^  機能                           ^
| ''color''     | 色（色名や RGB の16進数）       |
| ''src''       | テクスチャで貼り付ける画像      |
| ''radius''    | スクリーンの半径（既定値 500）  |
| ''rotation''  | 回転角度（x y z）               |

<code html>
<a-sky src="背景画像"></a-sky>
</code>

----
==== カメラ(camera) ====

A-Frame では 3D 空間に仮想的にカメラを設置して、そのカメラで見たものがブラウザに表示される。
<fc #ff0000>**カメラは初期状態では $z$ 軸の負の方向を向いている。**</fc>
カメラオブジェクトは ''<a-camera></a-camera>'' で記述する。

^  属性     ^  機能                             ^
| ''far''   | far 面までの距離（既定値 10000）  |
| ''near''  | near 面までの距離（既定値 0.5）   |
| ''fov''   | 視野角（既定値 80）               |

カメラで見えるのは、奥行きが near 面から far 面までの範囲、上下が fov の範囲である。
それを超えた範囲にあるものは映らない。

{{ :aframe:camera.png?nolink |カメラの向きと見える範囲}}

----

==== 球体(sphere) ====

3D 空間内に球体オブジェクトを置く。
球体オブジェクトは ''<a-sphere></a-sphere>'' で記述する。

^  属性         ^  機能                          ^
| ''src''       | テクスチャで貼り付ける画像     |
| ''color''     | 色（色名や RGB の16進数）      |
| ''opacity''   | 透明度（0 から 1 までの範囲）  |
| ''radius''    | 半径（既定値 1）               |
| ''position''  | 位置（x y z）                  |
| ''rotation''  | 回転角度（x y z）              |

オブジェクトの位置は ''position'' 属性で指定し、属性値 ''"x y z"'' には座標を数値で記述する。

<code html>
<a-sphere radius="半径" position="x y z"></a-sphere>
</code>

----
==== 直線(line) ====

3D 空間内に直線オブジェクトを置く。
直線オブジェクトは ''<a-entity line></a-entity>'' で記述する。

属性 ''line'' の属性値には、直線の設定値を「プロパティ:値;」のように記述する。
複数個のプロパティはセミコロンで区切って記述する。

^  プロパティ  ^  機能                      ^
| ''start''    | 直線の始点（x1 y1 z1）     |
| ''end''      | 直線の終点（x2 y2 z2）     |
| ''color''    | 色（色名や RGB の16進数）  |

<code html>
<a-entity line="start: x1 y1 z1; end: x2 y2 z2; color: 色"></a-entity>
</code>

===== A-Frame の属性 =====
==== マテリアル(material) ====

属性マテリアルはオブジェクトの外観を設定するためのものである。

よく使うプロパティには以下のようなものがある。

^  プロパティ    ^  機能                                                               ^
| ''color''      | ベースとなる色（色名や RGB の16進数）                               |
| ''metalness''  | 金属質（0 から 1 までの範囲）                                       |
| ''opacity''    | 透明度（0 から 1 までの範囲）                                       |
| ''roughness''  | 表面の粗さ（0 から 1 までの範囲）                                   |
| ''shader''     | ベースとなるマテリアルの指定（standard/flat/phong/カスタムも可能）  |
| ''src''        | テクスチャで貼り付ける画像                                          |