When Three.js is calculating the elapsed time, it fails to render

Question

When Three.js is calculating the elapsed time, it fails to render

My goal is to display a rotating cube with a consistent rotation speed across different machines. In order to achieve this, I calculate the timespan between each frame and use this elapsed value in the rotation process.

Here's the basic code snippet:

var elapsed = (timestamp - lastFrameTimestamp)/1000.0; // Issue with cube not showing up

However, when I use this calculated value, nothing appears on the screen. Surprisingly, there are no errors or warnings shown in the console. When I log the elapsed value to the console, it shows the correct number.

I experimented by setting the difference to a fixed value, like so:

var elapsed = 16.665487/1000.0;

The cube displays properly using this fixed value. I have created a jsFiddle for reference. I tested this issue in both Chrome and Firefox, but encountered the same problem in both browsers.

If anyone has any ideas or insights into what might be causing this issue, I would greatly appreciate the help!

javascript three.js

Answer 1

Answer №1

One issue with the provided code snippet is that the variable timestamp will be initially set to null when the function animate is first called. As a result, both lastFrameTimestamp and elapsed are also set to null, impacting the rotation of the animation.

According to the information from MDN web docs regarding requestAnimationFrame:

The callback method receives a single argument, a DOMHighResTimeStamp, indicating the time when callbacks queued by requestAnimationFrame start executing. Despite the passage of time during previous callback executions in the same frame, each callback receives the same timestamp. This timestamp is represented as a decimal number in milliseconds but has a precision of at least 1ms (1000 µs).

Hence, requestAnimationFrame provides the callback function (animate) with a timestamp representing the current time (as returned by performance.now()) when it starts invoking callbacks.

To ensure your animation utilizes timestamps effectively, it's essential to initiate your animation loop by calling:

requestAnimationFrame(animate);

Instead of simply relying on animate();

Answer 2

One issue with the provided code snippet is that the variable timestamp will be initially set to null when the function animate is first called. As a result, both lastFrameTimestamp and elapsed are also set to null, impacting the rotation of the animation.

According to the information from MDN web docs regarding requestAnimationFrame:

The callback method receives a single argument, a DOMHighResTimeStamp, indicating the time when callbacks queued by requestAnimationFrame start executing. Despite the passage of time during previous callback executions in the same frame, each callback receives the same timestamp. This timestamp is represented as a decimal number in milliseconds but has a precision of at least 1ms (1000 µs).

Hence, requestAnimationFrame provides the callback function (animate) with a timestamp representing the current time (as returned by performance.now()) when it starts invoking callbacks.

To ensure your animation utilizes timestamps effectively, it's essential to initiate your animation loop by calling:

requestAnimationFrame(animate);

Instead of simply relying on animate();

When Three.js is calculating the elapsed time, it fails to render

Answer №1

Similar questions

When an image is opened in a modal, it causes the original image on

Clear the history of a dynamically generated button using jQuery

Enhance the sequence of tweens by triggering them sequentially in response to rapid UI events

Error message: CORS policy prevents third-party scripts from running in Next.js

Unlocking the potential of the post method in express.js by harnessing the power

Calculate the cumulative values in ng-repeat using AngularJS

Calculating the factorial of a number using the reduce function

Disable the ability for new windows, such as popups, submit buttons, and forms with the target set to blank, to reference

Is it possible to set up a server with 'app' as the designated request handler?

Utilizing Custom Script Tag Types in Visual Studio for Enhanced HTML Template Functionality and Improved Syntax Highlighting

Which specific page initiates the post request?

Using Puppeteer to cycle through a CSV file and take a screenshot for each individual row?

Angular JS is throwing an error because angular.model is not recognized as a function

Handling TextChanged Event of a TextBox in ASP.NET using C#

Incorporate HTML into a webpage using JavaScript along with variables

What is the best way to retrieve nested reference data all at once from a Firestore document?

Encountering a problem when trying to set the value in the controller and receiving unexpected output from the console

Navigating to and Revealing a Division by Clicking

Removing CSS from a Link in react-router-dom

Displaying a variable in a text box using the italicized format