#How to implement this start,pause, restart and reset button

5 messages · Page 1 of 1 (latest)

tidal shore
#

but start / pause / reset what precisely?

#

the entire scene state?

#

or a particular transformation / animation ?

tidal shore
#

is it a keyframe animation?

#

I assume not, so:
for reset - save the initial scene into a JSON, and just restore it when you'd like to reset the scene:

const original = JSON.stringify(scene.children);

const reset = () => {
  scene.children = JSON.parse(original);
};

for play / pause, just use a flag in the animation loop:

let paused = false;

const pause = () => paused = true;
const play = () => paused = false;

const onAppLogicFrame = () => {
  // NOTE Update app here only, nowhere outside
};

const onAnimationFrame = () => {
  requestAnimationFrame(onAnimationFrame);

  if (paused) {
    return;
  }
 
  onAppLogicFrame();

  renderer.render(camera, scene);
};
onAnimationFrame();