帧向下旋转

Aframe Rotate Down

我正在做一个 Aframe 项目,想要一个允许实体向下旋转的 control/event。

我正在尝试创建一个新动画并将其作为子对象放在实体上。这在沿 x 轴左右转动时效果很好,但我似乎无法让它向下旋转盒子。

在某些情况下,例如 {z: 90, x:90, y: 0},无法将指向相机的脸向下旋转。更改为 y 或 z 没有区别。

我创建了一个最小的 plunker 来显示这个问题。 https://plnkr.co/edit/B6apT3?p=preview

编辑:添加来自原始 plunker 的代码。

拒绝我使用以下逻辑。

if(rotateOnY){
  z -= 90;
} else {
  y -= 90;
}
changePosition(x, y, z);

要更改位置,我使用以下函数。

function changePosition(x, y, z){
  let animation = document.createElement('a-animation');
  animation.setAttribute("attribute","rotation");
  animation.setAttribute("dur", 300);
  animation.setAttribute("repeat", "0");
  animation.setAttribute("to",`${z} ${x} ${y}`);
  document.getElementById('box').appendChild(animation);
  document.getElementById('position-text').setAttribute('text', `value: Position(x, y, z): ${x} ${y} ${z}`)
}

有一个非常有用的答案,但使用 Tween 的旋转不太奏效。

我们可以将逻辑更改为这样的东西,但是数学运算并不完全正确,如 http://plnkr.co/edit/hr2l83?p=preview

中所示
const originalEuler = new THREE.Euler(x, y, z);
const originalQuaternion = new THREE.Quaternion();
originalQuaternion.setFromEuler(originalEuler);

var tarQ = originalQuaternion.premultiply(q);

var euler = new THREE.Euler();
euler.setFromQuaternion(tarQ);
let rot = { // rot not pos
  x: THREE.Math.radToDeg(euler._x),
  y: THREE.Math.radToDeg(euler._y),
  z: THREE.Math.radToDeg(euler._z)
};
// update to neares 45
for(let axis of Object.keys(rot)){
  rot[axis] = nearest45(rot[axis]);
}
// update global x, y, z;
x = rot.x; y = rot.y; z = rot.z;
changePosition(rot.x, rot.y, rot.z);

编辑:抱歉 - 虽然准确,但我原来的回答并没有达到应有的帮助。 further digging 之后,我找到了一种无需获得数学博士学位就可以应用世界旋转的便捷干净的方法,基本上可以归结为:

var q = new THREE.Quaternion(); // create once and reuse q.setFromAxisAngle( dirVec, Math.PI/2 );// desired world rotation axis, 90 degrees in radians var tarQ = box.quaternion.premultiply( q );

updated plunker

(请注意,为了补间过渡,我采用了克隆原始四元数,对其进行操作,然后将其设置为补间的目标。)


欢迎来到 3D 旋转的奇妙痛苦世界。

在 3D 数学术语中,您想要旋转对象 in world space, as opposed to local/mesh space - the latter implicitly allows for a world of problems including what I believe is the issue you're running into here - gimbal lock

在两个空间之间进行转换涉及一些矩阵数学,需要一些时间来适应,但幸运的是,三个空间有一些出色的辅助方法。有关此类转换的详细说明,请参阅此处的最佳答案: