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)