ボタンのクリックでcancelAnimationFrameが機能しない

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ための引数。ちょうどsetIntervalとclearIntervalのように。

var animId = requestAnimationFrame(anim); 

//then 
cancelAnimationFrame(animId); 

次回の予定機能をキャンセルするだけです。