I'm confused as to why my camera isn't smoothly moving back. Upon refreshing the page, it moves back once with a smooth slerp animation. However, after that initial movement, it doesn't respond to any mousewheel input. I expect it to smoothly slerp forward and backward (as I scroll up and down) between the x quaternions.
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); //Images provided 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);
}
}
If I continuously scroll up multiple times, this is what the console logs show: https://i.sstatic.net/1aD5t.png
and when scrolling down: