2019-07-18に投稿

A-Frameでコントローラの角度を正確に取得する

A-Frameでコントローラの向きに合わせて処理をしたい時があると思う。コントローラの動きに追従するメニューとかであれば子要素として表示すれば良いだけなので問題ないが、例えば銃を撃って弾を発射する場合などは完全に別オブジェクトとして生成する必要があるためコントローラの角度を取得してそれを利用して弾の角度を初期化したりする必要がある。

A-Frameだとrotationという属性があるためそれでオブジェクトの角度を利用することもできるが、それだとうまくいかない。

Oculus Questのコントローラの角度が謎 でも書いている通り、rotationはうまく値が取れない。

じゃあどうするかというと、A-Frameは内部的にはthree.jsが使われているため、そのあたりの機能を利用していく。

A-Frameコンポーネント内で参照できる要素からは、下記のようにthree.jsのObject3Dが参照できるようになっている。

this.el.object3D

これを利用すればA-Frame単体では難しいような3Dの操作もできるようになる。詳しい傾きについてはQuaternionを利用することができる。たとえば下記のような感じ。

    const q = new Quaternion()

    const gunQuaternion = new Quaternion()
    this.el.object3D.getWorldQuaternion(gunQuaternion)
    q.multiply(gunQuaternion)

    bullet.object3D.applyQuaternion(q)

だら@Crieit開発者

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

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

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

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

ボードとは?

関連記事

コメント