如何在 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);