gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:23:46 25 4
gpt4 key购买 nike

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

enter image description here

为此,我使用了 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)))

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

谢谢

最佳答案

您可以将四元数应用到单位向量上,然后计算 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>

关于javascript - 从 Pose.orientation 四元数获取欧拉 Angular ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52011128/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com