从VRPose.orientation Quarternion获取欧拉角

Question

我需要获取手机面向的方向与水平线之间的角度θ（请参见图片）。

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

现在，我正在尝试将四元数转换为欧拉角，以便能够获得所需的 theta 角，但是通过尝试，该角并不独立于其他旋转角度（即，如果用户从其位置转过来，同时将手机保持在相同的方向，则角度 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

您可以将四元数应用于单位矢量，然后计算角度：

def Hanoi(n,start_,inter_,end_):
    if n==1:
        end_.append(start_[-1])
        start_.remove(start_[-1])
        print('start_peg , inter_peg, end_peg :{}\t{}\t{}'.format(start_,inter_,end_))
    else:
        Hanoi(n-1,start_,end_,inter_)
        Hanoi(1,start_,inter_,end_)
        Hanoi(n-1,inter_,start_,end_)

# it's possible to use any input variable name
n=3
a=list(range(n,0,-1))
b,c=[],[]
Hanoi(n,a,b,c)

Out:
start_peg , inter_peg, end_peg :[3, 2]  []      [1]
start_peg , inter_peg, end_peg :[3]     [1]     [2]
start_peg , inter_peg, end_peg :[]      [3]     [2, 1]
start_peg , inter_peg, end_peg :[]      [2, 1]  [3]
start_peg , inter_peg, end_peg :[2]     [3]     [1]
start_peg , inter_peg, end_peg :[]      [1]     [3, 2]
start_peg , inter_peg, end_peg :[]      []      [3, 2, 1]

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;
}