The eternal Three.js animation that loops endlessly whenever it is clicked

Question

The eternal Three.js animation that loops endlessly whenever it is clicked

The Objective

My aim is to create a straightforward camera zoom in animation that increases the zoom level by a specific amount each time the button is clicked.

The Current Status

I have successfully implemented the animation using Three.js and linked it to buttons to trigger the script.

function cameraZoomIn() {
      console.log("Camera Zoom In Function Clicked");
      camera.position.z -= 50;
      requestAnimationFrame( cameraZoomIn );
      render();
};

<input type="button" onclick="cameraZoomIn();" value="Zoom Camera In!" />

The Issue at Hand

Although the animation is functioning, it continues to loop indefinitely when clicking on the "Zoom Camera In" button -

Update 1

If I eliminate requestAnimationFrame, the animation runs only once but abruptly jumps to the target position instead of smoothly transitioning. What could be causing this repetitive looping behavior?

javascript three.js

Answer 1

Answer №1

Simply stated: make sure to include a stopping condition in your loop.

Essentially, your loop looks like this:

while(true) {
   cameraZoomIn();
}

With requestAnimationFrame() continuously being called as long as the page is visible.

You should incorporate a check into your code.

var intialz = camera.position.z;
var zoomfactor = 50;
function cameraZoomIn() {
  console.log("Camera Zoom In Function Clicked");
  camera.position.z -= zoomfactor;
  if(camera.position.z > (intialz - (zoomfactor * 10))) {// stop zooming at 10x zoom
      requestAnimationFrame( cameraZoomIn );
  }
  render();
};

Answer 2

Simply stated: make sure to include a stopping condition in your loop.

Essentially, your loop looks like this:

while(true) {
   cameraZoomIn();
}

With requestAnimationFrame() continuously being called as long as the page is visible.

You should incorporate a check into your code.

var intialz = camera.position.z;
var zoomfactor = 50;
function cameraZoomIn() {
  console.log("Camera Zoom In Function Clicked");
  camera.position.z -= zoomfactor;
  if(camera.position.z > (intialz - (zoomfactor * 10))) {// stop zooming at 10x zoom
      requestAnimationFrame( cameraZoomIn );
  }
  render();
};

The eternal Three.js animation that loops endlessly whenever it is clicked

Answer №1

Similar questions

TypeScript is unaware that a component receives a necessary prop from a Higher Order Component (HOC)

Hide the menu when tapping outside on a tablet device

loading times of Bootstrap-select are slow when used in multiples

Utilizing jQuery to update dropdown selection based on JSON object values

"Exploring the usual progress of a standard GET request using Axios

Automatically update data in Angular without the need to refresh the page

What steps can I take to ensure that the browser prints out a PDF copy of a webpage?

Event triggered only upon initial click

Unable to locate 'react' for mdl module

Using NodeJS to handle server side FormData

Angular data binding between an input element and a span element

Node-archiver: A tool for dynamically compressing PDF files

Is it possible to use the same identifier for both the name and id attributes in HTML?

Optimizing logical expressions in C++

Using Javascript to extract information from the div element

Issue encountered with AJAX multiple image uploader

Retrieving specific value from a Parent Controller in AngularJS using UI Router

The effectiveness of the module is not meeting the anticipated standards

How to correct header alignment in HTML for Google Table

Choosing the primary camera on a web application with multiple rear cameras using WebRTC