概要
A-Frame で Oculus Go 用のコンテンツを作っていて、コントローラの向きを取得したかったのですが、方法が分かりませんでした。Stack Overflow にて質問したら、A-Frame 開発者・メンテナのひとり Kevin さんからひとつのアイデアを教えていただきました。忘れないようにメモしておきます。
結論
例えば以下の方法でコントローラの向きを取得することができました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame で Oculus Go のコントローラの向きを取得する</title>
<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- 任意に適当なオブジェクトを置いた -->
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-sky color="#ECECEC"></a-sky>
<!-- Oculus Go のコントローラを使う laser-controls -->
<a-entity id="ctl" laser-controls></a-entity>
<!-- コントローラの向きを表示するための a-text -->
<a-text id="txt" value="text" position="0 2 -2" align="center" color="#000000"></a-text>
</a-scene>
<script>
const ctl = document.getElementById("ctl");
const txt = document.getElementById("txt");
const timer = setInterval(() => { // （任意）コントローラの向きを定期的に取得して表示
// ここから、教えていただいた部分
const point = new THREE.Vector3(0, 0, -1);
ctl.object3D.localToWorld(point);
const worldDirection = point.sub(ctl.object3D.position);
// ここまで、教えていただいた部分
txt.setAttribute("value", worldDirection.x.toFixed(2) + ", " + worldDirection.y.toFixed(2) + ", " + worldDirection.z.toFixed(2));
}, 100);
</script>
</body>
</html>
以下、実行画面です。
以上、小ネタでした。