Question

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

我有两个按钮，分别是“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/]

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

1 个答案: