如何在 three.js 中的相機 object 的四元數之間來回切換？

Question

我不明白為什么我的相機不向后傾斜。 當我刷新頁面時，它會出現一次。 然后在那之后，如果我移動鼠標滾輪它什么也不會做。 我希望它會在 x 四元數之間向后傾斜（當我上下滾動時）。

export default class Experience {
    constructor(options = {}) {
    //...
        this.camera = new Camera();
        this.renderer = new Renderer(this.canvas);
        this.scrollTargetPosition = new THREE.Quaternion();
        this.scrollTargetPosition.setFromAxisAngle(new THREE.Vector3(0, 0, 1),0);


        this.onMouseScroll();
        this.animate();
    }

    onMouseScroll() {
        window.addEventListener("wheel", (event) => {
            if (event.wheelDelta > 0) {
                this.scrollTargetPosition.x = 0;
            } else {
                this.scrollTargetPosition.x = Math.PI / 2;
            }
        console.log("Target: " + this.scrollTargetPosition.x); //Pictures below
        console.log("Camera: " + this.camera.quaternion.x);
        });
    }

    animate() {
        this.camera.quaternion.slerp(this.scrollTargetPosition, 0.9);
        requestAnimationFrame(this.animate.bind(this));
        this.renderer.render(this.scene, this.camera);

    }
}

如果我向上滾動很多次，這就是 console.log 的樣子：

如果我向下滾動：

Answer 1

主要問題是您將四元數視為歐拉角，它們有很大的不同。

Quaternion.x不是以弧度表示的 x 軸旋轉。 四元數由虛數和實數的 4 維組合組成，因此最好不要管它的x, y, z, w屬性。 相反，請使用執行所需任務的實用程序方法。 下面的方法將 x 軸旋轉設置為 0 或 90 度：

onMouseScroll() {
    let xAxis = new THREE.Vector3(1, 0, 0);

    window.addEventListener("wheel", (event) => {
        if (event.wheelDelta > 0) {
            this.scrollTargetPosition.setFromAxisAngle(xAxis, 0);
        } else {
            this.scrollTargetPosition.setFromAxisAngle(xAxis, Math.PI / 2);
        }
    });
}

之后，您應該能夠按預期執行球面插值，但是我建議您將0.9替換為較小的數字，例如0.1 ，否則它會很快就位：

this.camera.quaternion.slerp(this.scrollTargetPosition, 0.9);