按钮单击上的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();