为什么我的相机的四元数不在three.js中？答案

【问题标题】：Why is my camera's quaternion not slerping in three.js?为什么我的相机的四元数不在three.js中？
【发布时间】：2022-01-18 16:56:30
【问题描述】：

每当我滚动时，我都会尝试通过阻尼效果来平滑相机旋转。我的代码在下面显示有效，因为每当我滚动时，我的this.camera 的“x”四元值都会更新，但是它是“活泼的”。每次滚动时，它都不会缓解或插入。相反，它会跳转到新值。我不知道为什么会这样。

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

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

    onMouseScroll() {
        window.addEventListener("mousewheel", (event) => {
            this.lerp2 = true;
            if (event.wheelDelta > 0) {
                this.scrollTargetPosition.x += 0.05;
            } else {
                this.scrollTargetPosition.x -= 0.05;
            }
            console.log(this.scrollTargetPosition); // Equal Each other-----------------
            console.log(this.camera.quaternion); // Equal Each other-----------------
        });
    }

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

    }
}

我有一种感觉，因为我将它们打印出来并且它们都是相同的，这就是问题所在（它与同一个向量倾斜 - 所以实际上没有插值），但我不知道为什么更改另一个变量会改变之前的相机animate() 函数。我也将0.9 切换到0.1 和其他人，但它没有做任何事情。

【问题讨论】：

标签： javascript three.js camera quaternions

【解决方案1】：

所以问题出在这一行：

this.scrollTargetPosition = this.camera.quaternion;

更改为新的 Quaterion 而不是将其设置为相机：

this.scrollTargetPosition = new THREE.Quaternion();

但是，这并不能解决 slerping 问题，因为它有时会进行插值，但有时不会。有时即使目标不同，它甚至在滚动时也不会移动。

【讨论】：