Skip to content

THREE.JS and buttons for start and pause animation

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

  // Rotate camera


  // 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.


Just return before requestAnimationFrame to pause:

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


  // Call rendering function


[ ]