嘗試鍛煉如何使用四元數旋轉沿路徑移動的相機以尋找新的方向向量

Question

我正在嘗試平穩地旋轉相機，並且不更改相機方向的y矢量，我可以使用，它會瞬間改變相機的方向，但這對我不起作用，我想要一個平滑的過渡隨着相機方向的改變。 我一直在閱讀，但並不了解所有內容，但是在我看來，四元數是解決此問題的方法。

我有this.object（我的相機）沿着設定的路徑（this.spline.points）移動。 相機在任何時間的位置均為（thisx，thisy，thisz）

我有cc [i]我希望相機面對的方向的方向向量（以前我使用過lookat（cc [i]），它可以正確地改變方向，但是太快/即刻改變了方向）

使用我已閱讀的信息，我在下面進行了嘗試，它只是導致相機移動時屏幕變黑。

任何人都可以請我解釋一下我是否走對了，如何糾正我的代碼。

謝謝

var thisx = this.object.matrixWorld.getPosition().x.toPrecision(3);
var thisy = this.object.matrixWorld.getPosition().y.toPrecision(3);
var thisz = this.object.matrixWorld.getPosition().z.toPrecision(3);
var i = 0;
do {
    var pathx = this.spline.points[i].x.toPrecision(3);
    var pathz = this.spline.points[i].z.toPrecision(3);

    if (thisx == pathx && thisz == pathz){

    this.object.useQuaternion = true;
    this.object.quaternion = new THREE.Quaternion(thisx, thisy, thisz, 1);
    var newvect;
    newvect.useQuaternion = true;
    newvect.quaternion = new THREE.Quaternion(thisx+cc[i].x, thisy+cc[i].y, thisz+cc[i].z, 1);

    var newQuaternion = new THREE.Quaternion();

    THREE.Quaternion.slerp(this.object.quaternion, newvect.quaternion, newQuaternion, 0.5);
    this.object.quaternion = newQuaternion;


     //this.object.lookAt( cc[i]);
            i = cc.length;
    } else i++;

} while(i < cc.length);

Answer 1

無需調用this.object.useQuaternion = true。 這是默認行為。 此外，this.object.quaternion包含當前旋轉，因此也無需生成該旋轉。

您可能想嘗試另一種方法-從樣條曲線位置，lookAt和向上向量構造旋轉矩陣，並創建四元數路徑作為預處理步驟：

var eye = this.spline.points[i].clone().normalize(); 
var center = cc[i].normalize();
var up = this.object.up.normalize();
var rotMatrix = new THREE.Matrix4().lookAt(eye, center, up);

然后，您可以根據旋轉矩陣創建四元數：

var quaternionAtSplineCoordinates = [];
quaternionAtSplineCoordinates.push(new THREE.Quaternion().setFromRotationMatrix(rotMatrix));

有了該路徑后，您可以在動畫循環中將四元數應用於攝影機-前提是您有足夠的樣本數量。 否則，您可以考慮使用slerp生成中間點。