javascript - 框架向下旋转

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 5 年前。

Improve this question

我正在开发一个 Aframe 项目，希望有一个允许实体向下旋转的控件/事件。

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

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

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

编辑:添加原始插件中的代码。

为了拒绝，我使用以下逻辑。

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

Answer 1

编辑:抱歉 - 虽然准确，但我最初的答案并没有发挥应有的帮助。经过一些further digging ，我找到了一种方便、干净的方法来应用世界旋转，而无需获得数学博士学位，这基本上可以归结为:

var q = new THREE.Quaternion();//创建一次并重复使用
q.setFromAxisAngle( dirVec, Math.PI/2 );//期望的世界旋转轴，90度弧度
var tarQ = box.quaternion.premultiply( q );

参见updated plunker

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

<小时/>

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

用 3D 数学术语来说，您想要旋转对象 in world space, as opposed to local/mesh space - 后者隐含地允许出现一系列问题，包括我认为您在这里遇到的问题 - gimbal lock .

在两个空间之间进行转换涉及一些矩阵数学，需要一些时间来适应，但幸运的是，三个空间有一些出色的辅助方法。有关此类转换的详细说明，请参阅此处的精彩答案:Set an object's absolute rotation around the world axis