如何在three.js中的相机对象的四元数之间来回切换？答案

【问题标题】：How do I slerp back and forth between quaternions for camera object in three.js?如何在three.js中的相机对象的四元数之间来回切换？
【发布时间】：2022-01-18 20:55:00
【问题描述】：

我不明白为什么我的相机不向后倾斜。当我刷新页面时，它会出现一次。然后在那之后，如果我移动鼠标滚轮它什么也不会做。我希望它会在 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 的外观如下：

如果我向下滚动：

【问题讨论】：

设置Quaternion.x = Math.PI / 2 时要达到什么目的？您是否尝试将相机绕 x 轴旋转 90 度？
@Marquizzo 是的，但这只是一个测试。我希望最终能够将其更改为任何东西，而不仅仅是围绕 x 的 90 度

标签： javascript three.js camera quaternions

【解决方案1】：

主要问题是您将a Quaternion 视为Euler angles，它们有很大的不同。

Quaternion.x 不是以弧度表示的 x 轴旋转。 Quaternions are made up of a 4-dimensional combination of imaginary and real numbers，所以它的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);

【讨论】：