Question

我还没有对四元数形成良好的直觉，所以这可能是我问题的一部分，但它们很容易可视化，所以我将WebGL摄像头基于它们。问题是，我需要支持在模型/环境中行走和绕点运行。

步行的代码很好，轨道也是如此。但是，当它们之间切换时，这就是问题所在。

这是一个显示问题的小问题：PROBLEM DEMO

在步行和轨道运行之间切换时，相机会弹出位置。这是我的更新功能：

if(isOrbit) {
    var eye = vec3.create();

    vec3.sub(eye, this.eye, this.orbit);

    mat4.fromRotationTranslation(this.orbitMatrix, this.orbitRotation, this.orbit);
    mat4.fromRotationTranslation(this.eyeMatrix,   this.eyeRotation,   eye);        
    mat4.multiply(this.mvMatrix, this.orbitMatrix, this.eyeMatrix);
}
else {                
    mat4.fromRotationTranslation(this.mvMatrix, this.eyeRotation, this.eye);    
}

问题在于，在第一部分中，眼睛值相对于相机，而在第二部分，它（显然）不是。然而，在轨道运行时，我尝试了一些不同的东西来校正眼睛的位置，这有助于在两种情况下都不考虑旋转。我已经尝试过各种各样的东西来考虑移动到轨道时的眼睛旋转，以及移动到步行时的轨道旋转，但它一直不起作用：^（

关于我应该做什么/在这里尝试的任何指示？单独进行任何操作（步行/轨道）似乎都很简单，但切换似乎是我的问题。

Answer 1

翻译部分后，将整个mvMatrix乘以mat4.multiply(this.mvMatrix, this.orbitMatrix, this.eyeMatrix);，因为fromRotationTranslation为矩阵分配了全新的值，而轨道部分则采用转换后的矩阵，并按计算的旋转进行MULTIPLIES。另外我建议你只修改mvMatrix的位置部分而不是修改整体，所以旋转元素将保持不变。就我而言，它看起来像这样：

   var moveDirection = this.rotation.getForwardVector();
   this.position.addSelf(moveDirection.multiplyByScalar(-elapsedTime));
   MVMatrix.setTranslation(this.position);

其中getForwardVector()计算旋转四元数的前向矢量，setTranslation()仅修改12,13和14th矩阵元素。此方法还将垂直翻译摄像机，就像摄像机的前向矢量一样。

WebGL四元数相机

1 个答案: