約1年振りくらいでA-frameを触りました。
1年前は頓挫したところが今回はなんとなく分かるようになったのと、1年前の0.8.0
と現在の1.0.4
で変わったところについて個人的なメモを残しておきます。
※0.9.0
に関しては過去に触った際の記録がありました。
願わくば、これがまた後で触るときができたときに少しでも勘を取り戻す縁になれば……。
a-scene
コンポーネント- React.js等の
id="app"
を付与する大枠に当たるポジション vr-mode-ui
を付与すると右下にVRモード切替ボタンが出現する
- React.js等の
a-assets
コンポーネント内に使用する画像や音声などの資源( assets )を登録できる- 最初からすべてを登録しておく必要はない、らしい(後からどのように追加するのか未検証)
a-sky
は背景を指定する- 画面ロード時の初期背景画像としてIDを指定した
a-assets
の資源を利用可能 a-sky
にsrc
属性を付与し、値に#
付きでa-assets
内の資源のIDを指定すれば良い
- 画面ロード時の初期背景画像としてIDを指定した
a-sphere
はa-text
とセットで使うa-sphere
でポータルの球体を生成。a-text
でその球体に対する説明を付記しておくa-sphere
にsrc
属性を付与し、値に#
付きでa-assets
内の資源のIDを指定した上でJSを記述すると背景切り替え(場所移動)ができるようになる
radius
は名前の通りa-sphere
やa-sky
といった半径が存在するオブジェクト(円柱や球体)に使用する。値を大きくすれば当然大きくなるa-entity
コンポーネントにcursor="fuse:true;"
を付与するとフォーカスを当て続けるとクリックするようになるa-animation
は0.9.0
以降廃止になった模様。アニメーションはa-entity
等にアニメーション用の属性を記述する(値の中に各プロパティを文字列としてまとめて記述する)- JavaScript側の記述方法は
AFRAME
にregisterComponent
でコンポーネント名を定義し、コンポーネントを記述していくinit
メソッドとしてイベントリスナーや各属性の値の変更などを書いていく。この辺りはプレーンなJavaScriptと変わらない- コンポーネント指向で書くことさえ押さえれば基本的な記法はOK
- 操作したいDOM要素を
document.getElementById
等で取得 - 各パラメータは
setAttribute
で後から操作可能 addEventListener
でフックも可
- 操作したいDOM要素を
- イベントリスナーを登録し、そのタイミングで属性として記述したアニメーションのキーと
enabled: true
の値を追記すればアニメーションを開始できる - 他のアニメーションと干渉する場合は
enabled: false
にすれば指定したキーのアニメーションは動かなくなるので調整
参考
- ドキュメント: A-Frame – Make WebVR
- 大枠: Scene – A-Frame
- 背景: <a-sky> – A-Frame
- 球体: <a-sphere> – A-Frame
- 作例: Building a 360° Image Gallery – A-Frame
- 作例2: A-Frame v1.0 で クリスマスアニメーション – Qiita
- アニメーション: Animation – A-Frame
a-animation
が0.9.0
で廃止になった旨の記述: 超簡単!A-Frameアニメーションの書き方まとめ | 子育て×エンジニアの超自由研究ブログ- 他に見付けられなかったのですが、実際
0.8.0
と同じ記述では動かなかったので……
- 他に見付けられなかったのですが、実際