A-Frameハンズオンの経験から、質問された内容やつまづくポイントを一覧にしてみました。これからA-Frameを始める方に転ばぬ先の杖として使っていただければと思います。

1. A-Frame
ハンズオンQA集
ハンズオンで質問されたこと、つまづくポイントいろいろ

2. 杉井 庸一 （S51年式）
趣味でA-Frameの勉強をしています。
In 修羅の国
バイク大好き
福岡からA-Fameを盛り上げるため、
ハンズオンなどを開催し、草の根活動
を始めたところです。
＃１月から広島に出没するかも。

3. ハンズオンで出た質問や、はま
りポイントについて、つらつら
と書いてみました。
Tokyo A-Framer meetupで盛り上がっているのがうらやましすぎて、LT登壇者の方々が
続々資料をUPしているのにまぎれて投稿してみようと思って作成したのは秘密です。

4. QA一覧
 A-Frame開発したいけど、環境は？
 タグがいろいろあるけど、何が何だか
わからないよ
 思った場所に置けないんだけど。なぜ
か後ろに現れるんだけど。
 作ったものを確認したいけど歩き回っ
て確認するのは見づらいよ。
 画面が真っ黒になっちゃったんだけど
 画面の見え方がおかしくなったんです
けど
 平面(a-plane)が見えないんですけど
 もっと面白いアニメーションない？
 画面に位置固定表示して、移動しても
表示しつづける方法ない？
 InspectorでA-BOXとかどうやってだす
の？
 Inspectorでマウス操作がなんかおかし
いんだけど
 Inspectorで作ったのが反映されないよ
 VRゴーグルで見ると酔うんだけど
 HMDで見れないんだけど

5. A-Frame開発したいけど、環境は？
 簡単な内容であれば、テキストエディタで書いた内容をブラウザにドラック＆ド
ロップで大丈夫です。
 手が込んでくると（Javascript使ったり）いろいろ動かなくなるので、A-Frameボ
イラープレートを使うのがよいかと思います。
 ボイラープレートは、aframe.ioのGetting Startからダウンロード
「https://aframe.io/docs/0.3.0/introduction/getting-started.html」
 Node.jsが必要です。

6. A-Frame開発したいけど、環境は？
A-Frameのボイラープレートを使って環境構築します。
 ZIPファイルをどこでもいいので解凍します。
 解凍したフォルダでコマンドプロンプトを起動して、初回
設定のコマンドを実行する。
 > npm install
 ※各種ダウンロードします。しばらく時間がかかります。
 サーバ起動のコマンドを実行する。
 > npm start
 ※既定のブラウザが起動し、index.htmlを表示します。
 終了する際は、以下のコマンドを実行する。
 > Ctrl + c
 詳細は、ZIPファイルに同梱のREADME.mdを確認ください。

7. タグがいろいろあるけど、何が何だかわか
らないよ
まずはこれだけ覚えましょう。
 シーン（A-SCENE）
 3D空間そのもの。ここにカメラ、ライト、エンティ
ティを配置して3DCGの世界を構築していきます。
 カメラ（A-CAMERA）
 構築した3DCGの世界をどのように見るかはカメラ
によって決まります。
 ライト（A-LIGHT）
 ライトがなければ3DCGの世界は真っ暗です。光源
を設定しましょう。
 エンティティ（その他）
 3DCG空間に存在する物です。球や平面など様々で
す。

8. 思った場所に置けないんだけど。
なぜか後ろに現れるんだけど。
各値の意味を再認識しましょう。
 座標（POSITION）
 Y-up 右手座標系
 X座標：向かって右がプラス
 Y座標：向かって上がプラス
 Z座標：向かって後ろがプラス
 向き（ROTATION）
 右手回り。単位は度。
 マイナス値も指定可能。
 大きさ（SCALE）
 単位はメートル。
 例： 目線の高さは、Y座標：1.6

9. 作ったものを確認したいけど歩き回って確認す
るのは見づらいよ。
 おもむろに「Ctrl + Alt + i」を押して
Inspectorで見てみましょう。
 自由な位置から俯瞰して見ることが
できます。

10. 画面が真っ黒になっちゃったんだけど
画面の見え方がおかしくなったんですけど
 a-lightを追加していませんか？まず
はa-lightを削除してデフォルトに戻
してみましょう。
 a-cameraを追加していませんか？ま
ずはa-cameraを削除してデフォルト
に戻してみましょう。

11. 平面(a-plane)が見えないんですけど
 何も設定しない場合はXY軸方向に水
平に配置されます。Inspectorで確認
しましょう。
 また、片面しか描画されないため、
裏から見ると透明で見えなくなりま
す。attributeのsideをdoubleにする
と両面表示となります。
 片面しか描画されないのはどのエン
ティティも同じです。a-sphereやa-
boxも内側は透明のため中から見る
と見えなくなります。

12. もっと面白いアニメーションない？
 a-animationは面白いですよね。A-Frameハンズオンでは真っ先に使ってもらって
います。
 a-animationでは、親エンティティの属性値を変更させることにより、結果的にア
ニメーションさせています。あらかじめアニメーションが用意されているわけで
はないということを覚えておいてください。
 工夫次第では面白いアニメーションになりますが、複雑なことはできません。
 Color属性や、カメラのFov属性など、エンティティ属性であれば何でも対象とな
ります（たぶん）ので、いろいろと試してみると面白いです。
 Easing設定をすると、アニメーションにより細かな動きが出てきますので試して
みてください。

13. 画面に位置固定表示して、移動しても表示
しつづける方法ない？
 手足を表現する際、カメラに追随し
ないといけませんよね。
 LeapMotionの手なんかわかりやすい
かと思います。
 カメラエンティティに挟み込むこと
で、LeapMotionの手の位置がカメラ
からの相対位置になるため追随して
くれます。
<a-entity id=“camera” camera>
<a-entity leap-hand="hand: left;"></a-entity>
<a-entity leap-hand="hand: right;"></a-entity>
</a-entity>

14. InspectorでA-BOXとかどうやってだすの？
 <a-entity>のCOMPONENTSか
ら”geometry”を選択してAddします。
 GEOMETRYの中のprimitiveから”box”
を選択すると、a-boxを作成できます。

15. Inspectorでマウス操作がなんかおかしい
んだけど
 画面右側はマウス操作が効きま
せん。
 のカーソルが出るところで
操作しましょう。
 マウスでのエンティティ移動も
うまく動かないようです。
Positionの数値を変更して移動さ
せましょう。
この部
分は
マウス
操作が
効きま
せん

16. Inspectorで作ったのが反映されないよ
 InspectorからExportしたHTMLファイ
ルからソースへ手動反映が必要です。
 忘れてブラウザをリロードしたり閉
じたりすると悲しいことがおきます。

17. VRゴーグルで見ると酔うんだけど
 仕様です（人間の）。VRの宿命ですね。
 根本的な対策は今のところないので、徐々に慣れていくしかありません。
 合わせて、立体視（二眼）については、13歳未満のお子様には悪影響がある（斜
視の発症、空間認識能力への影響）といわれていますのでご認識ください。

18. HMD（Oculus, HTCVive）で見れないんだ
けど
 開発版Firefoxもしくは開発版Chromiumで見れます。
 合わせて、DLLの追加やブラウザ設定を変更する必要があります。
 詳しくは「https://mozvr.com/」のGETTING STARTEDをご確認ください。

19. ご清聴ありがとうございました。
Enjoy WebVR, enjoy a-frame