cancelAnimationFrame on button click не работает

Question

Я пытаюсь анимировать вращение влево или вправо при нажатии кнопки. К сожалению, когда я нажимаю кнопку для левого вращения, она компилируется сама по себе, становясь все быстрее и быстрее. То же самое происходит при щелчке правой кнопкой мыши. Для отмены вращения требуется несколько щелчков противоположной кнопки.

Я хотел бы, чтобы левая кнопка отменила правое вращение и повернулась прямо во вращение влево и наоборот. Прямо сейчас, вы должны нажать кнопку противоположной кнопки для каждого нажатия первой кнопки.

код ниже:

var initialFrame = function() { 
    requestAnimationFrame(initialFrame); 
    renderer.render(scene, camera); 
}; 

var rotateLeft = function() { 
    requestAnimationFrame(rotateLeft); 
    wrap.rotation.y += -0.02; 
    wrapBack.rotation.y += -0.02; 
    renderer.render(scene, camera); 
}; 

var rotateRight = function() { 
    requestAnimationFrame(rotateRight); 
    wrap.rotation.y += 0.02; 
    wrapBack.rotation.y += 0.02; 
    renderer.render(scene, camera); 
}; 

initialFrame() 

$("#left-button").click(function() { 
    cancelAnimationFrame(rotateRight); 
    rotateLeft(); 
}); 

$("#right-button").click(function() { 
    cancelAnimationFrame(rotateLeft); 
    rotateRight(); 
}); 

Answer 1

Я думаю, что лучше поставить все анимации входа в цикл визуализации и управления в случае кнопки.

var step =0; 
var initialFrame = function() { 
    wrap.rotation.y += step; 
    wrapBack.rotation.y += step; 
    requestAnimationFrame(initialFrame); 
    renderer.render(scene, camera); 
    step=0; // if you want to rotate one step on a click (remove this for infinite rotation) 
}; 

var rotateLeft = function() { 
    step=-0.02; 
}; 

var rotateRight = function() { 
    step=0.02; 
}; 


$("#left-button").click(function() { 
    rotateLeft(); 
}); 

$("#right-button").click(function() { 
    rotateRight(); 
}); 

initialFrame(); 

Answer 2

FYI

агд для cancelAnimationFrame должен быть возвращаемым значением requestAnimationFrame. Точно так же, как setInterval и clearInterval.

var animId = requestAnimationFrame(anim); 

//then 
cancelAnimationFrame(animId); 

Это как раз отменить следующий запланированный функция.