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.
Advertisement
Answer
Just return before requestAnimationFrame
to pause:
function render() { if (!isPlay) return; //... // Call rendering function requestAnimationFrame(render); //... }