javascript - 从 Pose.orientation 四元数获取欧拉 Angular

Question

我需要获取手机面向的方向和地平线之间的 Angular theta(见图)。

为此，我使用了 web-vr polyfill 库，它允许我访问 VRPose.orientation，即作为四元数的相机方向。

现在，我正在尝试将四元数转换为欧拉 Angular ，以便能够获得我需要的 theta Angular ，但通过我的尝试，该 Angular 并不独立于其他旋转 Angular (即，如果用户从其位置转身，同时将手机保持在相同方向，则 Angular theta 会发生变化)。

这是我的代码。

  var orientation = frameData.pose.orientation
  var a = orientation[0]
  var b = orientation[1]
  var c = orientation[2]
  var d = orientation[3]

  var yaw, pitch, roll

  roll = Math.atan(2*(a*b + c*d)/(pow2(a) - pow2(b) - pow2(c) + pow2(d)))

  pitch = - Math.asin(2*(b*d - a*c))

  theta = Math.atan(2*(a*d + b*c)/(pow2(a) + pow2(b) - pow2(c) - pow2(d)))

知道我做错了什么或建议其他解决方案吗？

谢谢

Answer 1

您可以将四元数应用到单位向量上，然后计算 Angular :

const vec = new THREE.Vector3();

function getCameraAngle() {
  // Reset the vector to a unit vector pointing into the scene
  vec.set(0, 0, -1);
  // Apply the camera quaternion
  vec.applyQuaternion(camera.quaternion);
  // Calculate the angle based on Y
  return Math.asin(vec.y) * THREE.Math.RAD2DEG;
}

const angle = document.getElementById('angle');

function animate() {
  angle.textContent = getCameraAngle().toFixed(2);
  renderer.render(scene, camera);
};


// Boilerplate
new WebVRPolyfill();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const scene = new THREE.Scene();

const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.vr.enabled = true;
document.body.appendChild(renderer.domElement);
WEBVR.createButton(renderer);

scene.add(new THREE.AmbientLight('white', 1));

let grid = new THREE.GridHelper();
scene.add(grid);
grid = new THREE.GridHelper();
grid.rotation.x = Math.PI / 2;
grid.position.set(0, 5, -5);
scene.add(grid);
grid = new THREE.GridHelper();
grid.rotation.x = Math.PI / 2;
grid.position.set(0, 5, 5);
scene.add(grid);
grid = new THREE.GridHelper();
grid.rotation.x = Math.PI / 2;
grid.rotation.z = Math.PI / 2;
grid.position.set(5, 5, 0);
scene.add(grid);
grid = new THREE.GridHelper();
grid.rotation.x = Math.PI / 2;
grid.rotation.z = Math.PI / 2;
grid.position.set(-5, 5, 0);
scene.add(grid);
grid = new THREE.GridHelper();
grid.position.set(0, 10, 0);
scene.add(grid);

renderer.setAnimationLoop(animate);

window.addEventListener("resize", () => {
  renderer.setSize(window.innerWidth, window.innerHeight);
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
});

body {
  margin: 0;
  font-size: 0;
}

#angle {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  font-size: 20pt;
  font-family: monospace;
  padding: 0.2em;
}

<script src="https://unpkg.com/webvr-polyfill@0.10.6/build/webvr-polyfill.min.js"></script>
<script src="https://unpkg.com/three@0.95.0/build/three.min.js"></script>
<script src="https://unpkg.com/three@0.95.0/examples/js/vr/WebVR.js"></script>

<span id="angle"></span>