cancelAnimationFrame auf Knopf klicken funktioniert nicht

Question

Ich versuche, eine linke oder rechte Drehung auf Knopfdruck zu animieren. Leider, wenn ich auf den Knopf für die Linksdrehung klicke, kompiliert es sich selbst und wird schneller und schneller. Das Gleiche passiert mit dem Rechtsklick. Es dauert mehrere Klicks der gegenüberliegenden Schaltfläche, um die Drehung zu negieren.

Ich möchte mit der linken Taste die rechte Drehung abbrechen und direkt in die linke drehen und umgekehrt. Jetzt müssen Sie für jedes Mal, wenn Sie die erste Taste drücken, auf die Zeit für die Gegenseite klicken.

-Code unten:

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

Ich denke, dass es besser ist, die ganze Animation Login in die Schleife machen zu setzen und die Kontrollen in der Taste Ereignis.

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

die ARG für cancelAnimationFrame soll Rückgabewert von requestAnimationFrame sein. Genau wie setInterval und clearInterval.

var animId = requestAnimationFrame(anim); 

//then 
cancelAnimationFrame(animId); 

Es nur nächste geplante Funktion abbrechen.