THREE.JS and buttons for start and pause animation

Question

I try to launch an animation from my THREE.js GUI.

I have two buttons which are "Start" and "Reset" animation. Firstly, when I click on "Start" button, the animation has to launch (the animation is a rotation of a sphere) and the text of this button is set to "Pause". After the animation is launched, I can click another time to do a pause and stop the animation.

My issue is that I don't know to handle the rendering of the animation with these clicks and the render() of THREE.JS.

Here is what I have done for the moment :

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

and for my render() function, I have got :

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

As you can see, I try to call render() function to start the animation when I click first on startButton but I don't know to begin from a static sphere (actually, this is the camera which rotates) and, after the click on start, to make it rotate.

Could someone give more informations about this issue ?

Thanks in advance.

Solution

Just return before requestAnimationFrame to pause:

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

  //...

  // Call rendering function
  requestAnimationFrame(render);

  //...
}

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

Comments

[pixelDino]

In combination with camera and mouse control, there is a jump ahead on resume. I had to stop the clock with clock.running = false and start the clock with clock.start(). link