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

Question

我尝试从我的THREE.js GUI 启动动画。

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

我的问题是我不知道如何通过这些点击和THREE.JS 的render() 来处理动画的渲染。

这是我目前所做的：

// 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);
}

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

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

提前致谢。

Answer 1

只需在requestAnimationFrame 之前返回即可暂停：

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

  //...

  // Call rendering function
  requestAnimationFrame(render);

  //...
}

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