I am attempting to rotate a sphere a specified number of times when a button is clicked (with the user selecting the number of rotations). To achieve this, I have implemented a for loop:
$('#clickme').on('click', function () {
var multiple = 4; //Adjust this value to change rotation angles
var rotationVector = new THREE.Vector3(0,1,0);
var angle = ((360 / multiple) * Math.PI) / 180;
for (var i = 0; i < multiple; i++) {
sphere.rotateOnAxis(rotationVector, angle);
alert(i);
}
});
Currently, the alert serves as a placeholder, but my intention is to perform other actions after each rotation. The issue lies in the fact that the sphere never rotates when inside the loop. While there are no errors and the code executes without problems, the rotation fails to occur. If I remove sphere.rotateOnAxis from the for loop, it functions correctly (rotating once per click). I have attempted various ways to re-render the scene, however, they do not resolve the problem.
For a working example, please visit: http://jsfiddle.net/weatL3nc/2/