前回3D空間でキーボード操作のラジコンを作ったが、それをOculusQuestのVR空間内でスティックで操作して遊べるようにしてみた。前回のは下記。
これにスティックによる処理を追加していく。
左手右手の各コントロールコンポーネントは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上でプレイしたものを録画したやつ。
VRでのスティック操作バージョン(モデル変える前に撮影したやつ) pic.twitter.com/9v34bxapMu
— だら🍔技術系投稿サービスや100の質問メーカー運営中 (@dala00) June 17, 2019
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は誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント