THREE.JS 和按钮开始和暂停动画

Question

我尝试从我的THREE.jsGUI启动动画。

我有两个按钮，分别是“ Start”和“ Reset”动画。首先，当我点击“开始”按钮时，动画必须启动（动画是一个球体的旋转）并且这个按钮的文本设置为“ Pause”。动画启动后，我可以再次单击以暂停和停止动画。

我的问题是，我不知道要处理的动画渲染这些点击的和render()的THREE.JS。

这是我目前所做的：

// Boolean for start and restart
var initAnim = true;
var runAnim = false;

// Buttons startButton and resetButton
var startButton = document.getElementById( 'startButtonId' );
var resetButton = document.getElementById( 'resetButtonId' );

// Start Button
startButton.onclick = function StartAnimation() {
  if (initAnim) {
    initAnim = false;
    runAnim = true;
    theta = 0;
  }
  // Start and Pause 
  if (runAnim) {
    startButton.innerHTML = 'Pause';
    runAnim = false;
    render();
  } else {
    startButton.innerHTML = 'Restart';
    runAnim = true;
  }
}

// Reset Button
resetButton.onclick = function ResetParameters() {

  // Set StartButton to Start  
  startButton.innerHTML = 'Start';

  // Boolean for Stop Animation
  initAnim = true;
  runAnim = false;
}

对于我的 render() 函数，我有：

function render() {

  // Increment timer 
  timer += clock.getDelta()*0.1;
  theta = -timer;

  // Call rendering function
  requestAnimationFrame(render);

  // Rotate camera
  rotateCamera();

  controls.update();

  // Rendering
  renderer.render(scene, camera);
}

如您所见，render()当我第一次单击时，我尝试调用函数来启动动画，startButton但我不知道从静态球体开始（实际上，这是旋转的相机），然后单击开始后，让它旋转。

有人可以提供有关此问题的更多信息吗？

提前致谢。

Answer 1

只需返回之前requestAnimationFrame暂停：

function render() {
  if (!isPlay) return;

  //...

  // Call rendering function
  requestAnimationFrame(render);

  //...
}

[ https://jsfiddle.net/yr9ogsh8/ ]