Tengo un grupo de objetos que quiero rotar, hay un botón que debería cambiar al hacer clic de izquierda a derecha y un botón de parada que debería detener la posición actual del grupo en su ubicación actual, sin embargo, cada vez que hago clic en rotar, cambia de dirección pero aumenta la velocidad a pesar de que está vinculado a un control deslizante, he intentado llamar al último cuadro de animación y cancelarlo en cada llamada, pero nada funciona

 var speedslider = document.getElementById("speedinput"); var direction = true; var stopped = true; speedslider.addEventListener("change",DirectionBTN.onclick); zoomOutButton.addEventListener("change", zoomOutFunction); speedslider.addEventListener("change",StopStartBTN.onclick); //rotation of group const rotateGroup = function() { if(stopped == true){ group.rotation.y =!group.rotation.y } if(direction == true){ group.rotation.y += speedslider.value/1000; requestAnimationFrame(rotateGroup) } if(direction == false){ group.rotation.y -= speedslider.value/1000; requestAnimationFrame(rotateGroup) } }; //start rotation left StopStartBTN.onclick = function() { stopped = !stopped rotateGroup() }; DirectionBTN.onclick = function() { direction = !direction; rotateGroup(); };