旋转javascript时对象缩小答案

【问题标题】：Object shrinks when rotated javascript旋转javascript时对象缩小
【发布时间】：2015-04-07 03:02:22
【问题描述】：

我一直在开发一个基本的游戏引擎来学习这个过程，但我的旋转功能遇到了问题。

它工作正常，只是对象缩小并看起来倒置。

这里有一个jsfiddle 来说明我的观点。

我认为问题在于轮换代码本身，但我并不积极。

function Rotation(vec, rot){
if(Math.acos((vec.x + vec.y + vec.z -1)/2) === 0) { return vec; }

var qVec = new Quaternion(vec.x, vec.y, vec.z, 0);
qVec = Quaternions.multiply(qVec, rot);
qVec = Quaternions.multiply(qVec, rot.conjugate());
return new Vector3(qVec.x, qVec.y, qVec.z);
}

【问题讨论】：

标签： javascript vector rotation game-engine quaternions

【解决方案1】：

几件事：

首先，旋转四元数没有被归一化，所以它的逆和它的共轭不一样。四元数的旋转定义为：

q 是您正在旋转的矢量，p 是您正在旋转的矢量，p' 是最终旋转的矢量。

所以这是使用q的inverse定义的，它被定义为conjugate(q) / magnitude(q)^2。在q被归一化的情况下，magnitude(q)^2 == 1，所以它和仅仅乘以共轭是一样的。

还要注意这里的操作顺序。 Quat 乘法是不可交换的，因此它们的顺序很重要。

您可以通过规范化旋转四元数和固定操作顺序来解决此问题：

var qVec = new Quaternion(vec.x, vec.y, vec.z, 0);
qVec = Quaternions.multiply(rot.normalize(), qVec);
qVec = Quaternions.multiply(qVec, rot.conjugate());
return new Vector3(qVec.x, qVec.y, qVec.z);

其次，您希望将旋转 quat 定义为垂直于要旋转的平面。在这种情况下，您想要围绕 x-y 平面旋转。 z 轴垂直于这个平面，所以我们要定义沿 z 轴的旋转向量：

function update(){
    for(var i = 0; i < gameObjects.length; i++){
        gameObjects[i].rotation = euler(new Vector3(0, 0, frames/100));
    }
}

通过这些更改，我能够让盒子正确旋转。

（至于为什么要扩大/缩小规模，我不能 100% 确定。仍在努力解决这个问题。）

【讨论】：

太棒了！这有助于分配。我认为当前的缩小可能是因为我还没有将正方形投影到相机的平面上，基本上在我绘制时忽略了 z 轴。