I'm currently working on a small piece of code that animates the camera to zoom in on an earth model when clicked. However, I'm facing an issue where I need to stop the camera animation once it reaches a certain position.
Initially, the camera position starts at 20 and gradually reduces as part of the animation loop triggered by clicking on the sphere model. I'm looking for a way to halt this animation when the camera position hits 5.
Check out the current implementation here
var domEvents = new THREEx.DomEvents(camera, renderer.domElement);
domEvents.addEventListener(earth, 'click', function(event){
console.log('you clicked on the earth');
alert("test");
var render = function (actions) {
renderer.render(scene, camera);
console.log(camera.position.z); // starts at 20 and reduces with every call
camera.position.z -= 0.1;
requestAnimationFrame( render );
};
render();
// cameraloop();
}, false)
At present, the camera continues its animation endlessly without stopping. My goal is to make it pause when it reaches position 5.