I'm trying to slow the animation of a rotating cube on mouseOver, and have it continue on mouseLeave.
Currently when the mouse enters the cube, it slows down, but also snaps to another rotation quite suddenly, before snapping back when the mouse leaves.
Can anyone advise me on how to achieve a smooth slowdown transition without the snapping? A gradient would also be very nice, similar to css animations. My code is below.
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;
"mouseover" event subtract many times -0.5 to 0.9, then the "rotationSpeed" value change to negative. So, try:
cube.on("mouseover", () => {
if(rotationSpeed > 0){
rotationSpeed -= 0.1;
}
});
cube.on("mouseout", () => {
rotationSpeed = 0.9;
});