Estoy tratando de ralentizar la animación de un cubo giratorio en mouseOver y hacer que continúe en mouseLeave.

Actualmente, cuando el mouse ingresa al cubo, se ralentiza, pero también cambia a otra rotación bastante repentinamente, antes de regresar cuando el mouse se va.

¿Alguien puede aconsejarme sobre cómo lograr una transición de desaceleración suave sin chasquidos? Un degradado también sería muy bueno, similar a las animaciones css. Mi código está abajo.

 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;