2019-06-17に投稿

A-FrameでVRラジコンを作る

前回3D空間でキーボード操作のラジコンを作ったが、それをOculusQuestのVR空間内でスティックで操作して遊べるようにしてみた。前回のは下記。

A-Frameでキーボード操作のラジコンを作ってみる

これにスティックによる処理を追加していく。

スティック操作による値を取得

左手右手の各コントロールコンポーネントはtracked-controlsというをベースとしており、これのaxismoveイベントを使うことでスティックの傾きを取得することができる。

そのためイベント受信用のコンポーネントを作り、それをhand-controlsに割り当てれば取得することができる。例えば下記のような感じで左手用、右手用のcar-controller-left, car-controller-rightコンポーネントを作った場合は下記のようになる。

        <a-entity hand-controls="left" mixin="controller" car-controller-left></a-entity>
        <a-entity hand-controls="right" mixin="controller" car-controller-right></a-entity>

コンポーネントは下記のような感じ。左手の上下でスピード、右手の左右でハンドルをさばく。

    AFRAME.registerComponent('car-controller-left', {
      init: function () {
        this.el.addEventListener('axismove', function (e) {
          const car = document.querySelector('[car]').components.car
          car.onAxisMoveSpeed(e)
        })
      }
    })

あとはもう面倒になったので傾きも使わず前回作った処理をそのまま呼んでいるだけ。

      onAxisMoveSpeed: function(e) {
        if (e.detail.axis[1] == 0) {
          this.speeding = null
        } else if (e.detail.axis[1] > 0) {
          this.speeding = 'down'
        } else if (e.detail.axis[1] < 0) {
          this.speeding = 'up'
        }
      },
      onAxisMoveAngle: function(e) {
        if (e.detail.axis[0] == 0) {
          this.rotating = null
        } else if (e.detail.axis[0] > 0) {
          this.rotating = 'right'
        } else if (e.detail.axis[0] < 0) {
          this.rotating = 'left'
        }
      },

実際のもの

実際にVR上でプレイしたものを録画したやつ。

GitHubページで実際に試せる。実機がない人はキーボードのWASDでもOK。

https://dala00.github.io/a-frame-car-sample/

ソースはGitHubにもアップしてある。

dala00/a-frame-car-sample: Car control sample with A-Frame

まとめ

めちゃくちゃ簡単なのでぜひみんなやってみましょう。

次はFirebaseのRealtime Databaseいれてみんなで同時に部屋の中にいる、みたいなの試したい。


だら@Crieit開発者

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

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

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

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

ボードとは?

関連記事

コメント