My goal is to trigger an animation from the GUI using THREE.js.
The interface consists of two buttons, "Start" and "Reset," meant to control the rotation of a sphere. Clicking on the "Start" button should launch the animation, changing the button text to "Pause." Subsequent clicks will pause or resume the animation.
I am facing a challenge in managing the rendering of the animation alongside these user interactions and the render() function in THREE.JS.
This is what I have accomplished so far:
// Setting boolean values for animation initiation and running
var initAnim = true;
var runAnim = false;
// Retrieving startButton and resetButton elements
var startButton = document.getElementById('startElementId');
var resetButton = document.getElementById('resetElementId');
// Function for Start Button
startButton.onclick = function StartAnimation() {
if (initAnim) {
initAnim = false;
runAnim = true;
theta = 0;
}
// Handling Start and Pause functionality
if (runAnim) {
startButton.innerHTML = 'Pause';
runAnim = false;
render();
} else {
startButton.innerHTML = 'Restart';
runAnim = true;
}
}
// Function for Reset Button
resetButton.onclick = function ResetParameters() {
// Resetting StartButton to original state
startButton.innerHTML = 'Start';
// Stopping the animation
initAnim = true;
runAnim = false;
}
For the rendering logic in my render() function:
function render() {
// Incrementing timer
timer += clock.getDelta()*0.1;
theta = -timer;
// Triggering rendering function
requestAnimationFrame(render);
// Implementing camera rotation
rotateCamera();
controls.update();
// Rendering the scene
renderer.render(scene, camera);
}
My attempt involves invoking the render() function upon clicking the startButton to initiate the animation. However, I struggle with transitioning from a stationary sphere to one that rotates after the initial click.
If anyone has insights on resolving this issue, I would greatly appreciate it.
Thank you in advance.