Question

我正在尝试使用四元数在WebGL中实现相机。我使用以下功能旋转相机：

rotate: function(dx, dy, update) {

    // pitch
    if (dy != 0) {
        quat4.set([Math.sin(Render.degToRad(dy / 2.0)), 0, 0, 
                   Math.cos(Render.degToRad(dy / 2.0))], this.quatTemp);
        quat4.multiply(this.quatTemp, this.rotation, this.rotation);
    }

    // yaw
    if (dx != 0) {
        quat4.set([0, Math.sin(Render.degToRad(dx / 2.0)), 0, 
                   Math.cos(Render.degToRad(dx / 2.0))], this.quatTemp);
        quat4.multiply(this.rotation, this.quatTemp);
    }

    quat4.normalize(this.rotation);

    if(update == true)
        this.updateMatrix();

}

如果我禁用一个轴旋转它确实可以正常工作。但是如果两个组合我得到滚动/倾斜效果。我的向上向量是[0,1,0]。

Answer 1

问题是按照乘法的顺序，以下更改解决了问题：

if (dy != 0) {
    quat4.set([Math.sin(Render.degToRad(dy / 2.0)), 0, 0, 
               Math.cos(Render.degToRad(dy / 2.0))], this.quatTemp);
    quat4.multiply(this.rotation, this.quatTemp);
}

// yaw
if (dx != 0) {
    quat4.set([0, Math.sin(Render.degToRad(dx / 2.0)), 0, 
               Math.cos(Render.degToRad(dx / 2.0))], this.quatTemp);
    quat4.multiply(this.quatTemp, this.rotation, this.rotation);
}

Quaternion相机中的倾斜/滚动副作用

1 个答案: