I have a render rotating , the rotating is done by constant changing the y position
i have 2 buttons , 1 for rotate left and 1 for rotate right and a slider to indicate rotation speed -
my problem is once ive pressed one button it keeps the function running , i need to stop the function when the opposite function is called and vice versa
<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();
};
how about trying something like the following? Instead of having two different functions for left vs right, combine them into a single function called rotateGroup() and use a conditional statement to control the direction of rotation. This requires a "direction" variable outside of the functions so they can access it.
Then all you have to do is change the onclick handlers to set the value of the direction variable. To kick off the animation, you could just call rotateGroup() on page load, or as I did in this example, start the animation on the first button press and use another if statement to prevent the buttons from calling rotateGroup() more than once.
If that isn't what you want, look up cancelAnimationFrame(). If you assign a global id to requestAnimationFrame(), you will be able to call cancelAnimationFrame(idGoesHere) to stop the animation. I'm not sure which method is better, but this might be closer to the answer you were asking for.
More info on cancelAnimationFrame() on developer.mozilla.org
Below is an example of the first suggestion. Let me know if this helps, or if something is broken. Otherwise, happy animating. Cheers!
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();
}
};