A-Frameでキーボード操作を行う

A-Frameでkeydownやkeyup等のキーボードイベントを使ってブラウザ上で3D空間上の何かしらのオブジェクトを操作したりする方法。VRモードではなく、その前のブラウザモードでも何かしらの操作をできるようにしておきたい場合など。

操作用のコンポーネントを作成

下記のように、キーボードイベントをトラッキングしたコンポーネントを作成する。とくにいい方法があるわけではなさそうなので直接windowのイベントを利用する。

    AFRAME.registerComponent('key-controllable', {
      init: function () {
        window.addEventListener('keydown', this.onKeyDown.bind(this))
        window.addEventListener('keyup', this.onKeyUp.bind(this))

実際の処理は通常のWebのプログラミングと同様。

      onKeyDown: function (e) {
        if (e.keyCode == 65) {
          this.rotating = 'left'
        }
      }

ちなみにWASDキーを使いたい場合は前提として、デフォルトではWASDキーがカメラの移動に使用されているため下記の方法で無効にしておく必要がある。

A-Frameでデフォルトのキーボード操作を無効にする

あとはこれを動かしたいオブジェクトに指定する。

<a-box key-controllable>