I need assistance with slowing down the rotation animation of a cube when a mouse hovers over it and making it continue smoothly on mouse leave. The current issue I'm facing is that when the mouse enters the cube, the rotation slows down but abruptly snaps to another orientation before snapping back upon mouse exit.
Can anyone provide guidance on achieving a seamless slowdown transition without the sudden snapping? Additionally, I would appreciate if a gradient effect similar to CSS animations could be incorporated. Below is the code I am using:
let rotationSpeed = 0.9;
const interaction = new Interaction(renderer, scene, camera);
cube.cursor = "pointer";
cube.on("mouseover", () => {
rotationSpeed -= 0.5;
});
cube.on("mouseout", () => {
rotationSpeed += 0.5;
});
// CLOCK
const clock = new THREE.Clock();
const tick = () => {
// targetX = mouseX * 0.001;
// targetY = mouseY * 0.001;
const elapsedTime = clock.getElapsedTime();
// Update objects
cube.rotation.y = rotationSpeed * elapsedTime;
cube.rotation.x = rotationSpeed * elapsedTime;