もの（クオリティは低いので脳内補完お願いします）
https://impossible-flock.glitch.me/
コード
https://glitch.com/edit/#!/impossible-flock?path=index.html:1:0
A-Frameとは
- 公式サイト
- 基本的にA-Frame.jsを読み込んだHTMLだけでweb-VRが作れるというすぐれもの
- Glitchというプレイグラウンド的なとこで試すのが一番手っ取り早い
- A-Frame Schoolというやつが基礎を学ぶのにはちょうどいい（英語だけど比較的簡単）
基本の抑えどころ
<a-box>などの基本要素（プリミティブズ）に位置や角度などの属性（コンポーネント）を付け足して作っていく
a-boxなどの基本要素はプリミティブズと呼ばれ数十種類はある模様。
a-boxは立方体、a-skyは空全体、a-textは文字など役割がそれぞれ決まっている。
公式サイトの左サイドバーの一番下にプリミティブズが羅列されている。
a-boxやa-sphereはわかりやすいが、名前だけではなんの形の物体なのかわからないものもあり面白い。
また、a-entityというのはHTMLでいうdivのようなものであり、要素をグルーピングしたりするのに使える。
属性はコンポーネントと呼ばれ、位置を設定するpositionや角度を設定するrotationなどがある。
属性をコンポーネントと呼ぶのはおかしな気もするけど、属性をまとめて使いまわせたりするからそう呼んでいるのかも。
基本要素のsrc属性に画像のURLを貼ることで画像をVR空間に置ける
a-boxなどの要素のsrc属性に画像を貼った場合は、それらに貼り付くようにして画像が表示されるので、画像だけをVR空間に置きたい場合はa-image要素を使うといい。
また、jpgやpngではなくgltfという拡張子の3Dモデリング用画像？を専用の属性とともに使用するとそのgltfファイルのみでVR空間を表現することができる。
GlitchのVR表示画面でCtrl+Alt+iでA-Frame用のインスペクタを表示できる
細かい調整はここで可能。
A-Frame RegistryでA-Frameで使用できるライブラリを探せる
A-Frame Registry
今回のスターウォーズでも使用した宇宙のスターダストを表現したパーティクルや、テキストを動かすアニメーションはライブラリを使用している。
既存のものを使うだけでなかなか面白いことができそうではある。
クリックなどのユーザーイベントは要素と組み合わせて行う
普通のマウスカーソルはVR空間とは連携していないので、カーソル要素を作ってその要素とクリックしたい要素が重なったときにクリックすることでイベントが発生する。
例えば、下のURLでは黒い点をパネルに合わせてクリックすると周りの画像が変わるようになっている。
360° Image Gallery
まとめ
なのでスターウォーズOPはこれだけでできた。
- ロゴ画像、テキストなどをa-entityでまとめてrotationで斜めにしておく
- ライブラリでa-skyにパーティクル、テキストをまとめたものにアニメーションをかける