2019-06-17に投稿

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>

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント