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

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

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

QA 一覧 A-Frame 開発したいけど、環境は？ タグがいろいろあるけど、何が何だかわからないよ 思った場所に置けないんだけど。なぜか後ろに現れるんだけど。 作ったものを確認したいけど歩き回って確認するのは見づらいよ。 画面が真っ黒になっちゃったんだけど 画面の見え方がおかしくなったんですけど 平面 (a-plane) が見えないんですけど

もっと面白いアニメーションない？ 画面に位置固定表示して、移動しても表示しつづける方法ない？ Inspector で A-BOX とかどうやってだすの？ Inspector でマウス操作がなんかおかしいんだけど Inspector で作ったのが反映されないよ VR ゴーグルで見ると酔うんだけど HMD で見れないんだけど

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

https://aframe.io/docs/0.3.0/introduction/getting-started.html」 Node.js が必要です。

A-Frame 開発したいけど、環境は？A-Frame のボイラープレートを使って環境構築します。 ZIP ファイルをどこでもいいので解凍します。 解凍したフォルダでコマンドプロンプトを起動して、初回設定のコマンドを実行する。

> npm install ※ 各種ダウンロードします。しばらく時間がかかります。

サーバ起動のコマンドを実行する。 > npm start ※ 既定のブラウザが起動し、 index.html を表示します。

終了する際は、以下のコマンドを実行する。 > Ctrl + c

詳細は、 ZIP ファイルに同梱の README.md を確認ください。

タグがいろいろあるけど、何が何だかわからないよまずはこれだけ覚えましょう。 シーン（ A-SCENE ）

3D 空間そのもの。ここにカメラ、ライト、エンティティを配置して 3DCG の世界を構築していきます。 カメラ（ A-CAMERA ）

構築した 3DCG の世界をどのように見るかはカメラによって決まります。 ライト（ A-LIGHT ）

ライトがなければ 3DCG の世界は真っ暗です。光源を設定しましょう。 エンティティ（その他）

3DCG 空間に存在する物です。球や平面など様々です。

思った場所に置けないんだけど。なぜか後ろに現れるんだけど。各値の意味を再認識しましょう。 座標（ POSITION ）

Y-up 右手座標系 X 座標：向かって右がプラス Y 座標：向かって上がプラス Z 座標：向かって後ろがプラス

向き（ ROTATION ） 右手回り。単位は度。 マイナス値も指定可能。

大きさ（ SCALE ） 単位はメートル。 例： 目線の高さは、 Y 座標： 1.6

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

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

a-camera を追加していませんか？まずは a-camera を削除してデフォルトに戻してみましょう。

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

a-box も内側は透明のため中から見ると見えなくなります。

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

画面に位置固定表示して、移動しても表示しつづける方法ない？ 手足を表現する際、カメラに追随しないといけませんよね。 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>

Inspector で A-BOX とかどうやってだすの？ <a-entity> の COMPONENTS から” geometry” を選択して Add します。 GEOMETRY の中の primitive から”

box” を選択すると、 a-box を作成できます。

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

この部分はマウス操作が効きません

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

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

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

ご清聴ありがとうございました。

Enjoy WebVR, enjoy a-frame