A-frameに関するメモ (`1.0.4`現在)

  • 投稿日
  • 著者 アルム＝バンド
  • カテゴリー JavaScirpt

約1年振りくらいでA-frameを触りました。

1年前は頓挫したところが今回はなんとなく分かるようになったのと、1年前の0.8.0と現在の1.0.4で変わったところについて個人的なメモを残しておきます。

※0.9.0に関しては過去に触った際の記録がありました。

願わくば、これがまた後で触るときができたときに少しでも勘を取り戻す縁になれば……。

  • a-sceneコンポーネント
    • React.js等のid="app"を付与する大枠に当たるポジション
    • vr-mode-uiを付与すると右下にVRモード切替ボタンが出現する
  • a-assetsコンポーネント内に使用する画像や音声などの資源( assets )を登録できる
    • 最初からすべてを登録しておく必要はない、らしい(後からどのように追加するのか未検証)
  • a-skyは背景を指定する
    • 画面ロード時の初期背景画像としてIDを指定したa-assetsの資源を利用可能
    • a-skyにsrc属性を付与し、値に#付きでa-assets内の資源の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でフックも可
    • イベントリスナーを登録し、そのタイミングで属性として記述したアニメーションのキーとenabled: trueの値を追記すればアニメーションを開始できる
    • 他のアニメーションと干渉する場合はenabled: falseにすれば指定したキーのアニメーションは動かなくなるので調整

参考

A-Frame VR

この記事を書いた人

アルム＝バンド

フロントエンド・バックエンド・サーバエンジニア。LAMPやNodeからWP、Gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。

記事一覧