如何在 three.js 中的相机对象的四元数之间来回休眠？

Question

我不明白为什么我的相机不回光。当我刷新页面时，它 slerps 一次。在那之后，如果我移动鼠标滚轮，它不会做任何事情。我希望它在 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

主要问题是你治疗的是 a Quaternion as if it were 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);

如何在 three.js 中的相机对象的四元数之间来回休眠？

How do I slerp back and forth between quaternions for camera object in three.js?

javascript

three.js

camera

quaternions