Tengo un render giratorio, la rotación se realiza cambiando constantemente la posición y
tengo 2 botones, 1 para girar a la izquierda y 1 para girar a la derecha y un control deslizante para indicar la velocidad de rotación -
mi problema es que una vez que presioné un botón, la función sigue funcionando, necesito detener la función cuando se llama a la función opuesta y viceversa
<button id="LeftBTN" type="button">Rotate Left</button> <button id="RightBTN" type="button">Rotate Right</button> > <input class="bar" type="range" id="speedinput" min="0" max="100" value="0" onchange="speed.value=value"/> <span class="highlight"></span> <output id="speed">0</output> var speedslider = document.getElementById("speedinput"); speedslider.addEventListener("change",LeftBTN.onclick); speedslider.addEventListener("change",RightBTN.onclick); zoomOutButton.addEventListener("change", zoomOutFunction); //set rotation functions const rotategroupright = function() { requestAnimationFrame(rotategroupright); group.rotation.y -= 0; group.rotation.y += speedslider.value/10000; console.log(group.rotation.y) }; const rotategroupleft = function() { requestAnimationFrame(rotategroupleft); group.rotation.y +=0; group.rotation.y -= speedslider.value/10000; console.log(group.rotation.y) }; //start rotation left LeftBTN.onclick = function() { speedslider.value = 0; speed.value = [0]; rotategroupleft(); }; //start rotation right RightBTN.onclick = function() { speedslider.value = 0; speed.value = [0]; rotategroupright(); };¿Qué tal probar algo como lo siguiente? En lugar de tener dos funciones diferentes para la izquierda y la derecha, combínelas en una sola función llamada "rotateGroup()" y use una declaración condicional para controlar la dirección de rotación. Esto requiere una variable de "dirección" fuera de las funciones para que puedan acceder a ella.
Luego, todo lo que tiene que hacer es cambiar los controladores onclick para establecer el valor de la variable de dirección. Para iniciar la animación, puede simplemente llamar a rotarGroup() en la carga de la página, o como hice en este ejemplo, iniciar la animación en la primera pulsación del botón y usar otra instrucción if para evitar que los botones llamen a rotarGroup() más de una vez. .
Si eso no es lo que desea, busque cancelAnimationFrame(). Si asigna una identificación global a requestAnimationFrame(), podrá llamar a cancelAnimationFrame(idGoesHere) para detener la animación. No estoy seguro de qué método es mejor, pero esto podría estar más cerca de la respuesta que estabas preguntando.
Más información sobre cancelAnimationFrame() en developer.mozilla.org
A continuación se muestra un ejemplo de la primera sugerencia. Avíseme si esto ayuda, o si algo está roto. De lo contrario, feliz animación. ¡Salud!
var direction = ""; var stopped = true; const rotateGroup = function() { if(direction == "left"){ group.rotation.y +=0; group.rotation.y -= speedslider.value/10000; }else { group.rotation.y -= 0; group.rotation.y += speedslider.value/10000; } console.log(group.rotation.y); requestAnimationFrame(rotateGroup); }; //start rotation left LeftBTN.onclick = function() { speedslider.value = 0; speed.value = [0]; direction = "left"; if(stopped){ stopped = false; rotateGroup(); } }; //start rotation right RightBTN.onclick = function() { speedslider.value = 0; speed.value = [0]; direction = "right"; if(stopped){ stopped = false; rotateGroup(); } };