What could be causing the rotation speed discrepancy of (1/2) in Three.js?

Question

What could be causing the rotation speed discrepancy of (1/2) in Three.js?

I'm currently simulating the earth's rotation on its axis in my project. I calculated that one complete rotation of the earth equals

(2*Math.PI)

radians, so to determine the earth's rotation per minute (per frame), I used the formula:

(2*Math.PI)/(24*60)

. My program is rendering at 60FPS with requestAnimationFrame(), indicating that each second of runtime should simulate one hour of actual earth rotation. When I checked Chrome's JavaScript console, it was confirmed to be running at 60FPS. However, the simulation appeared to be twice as fast, completing a full rotation every 12 seconds instead of 24. By adjusting the expression to

(2*Math.PI)/(24*60*2)

, the rotation speed corrected itself, with 24 seconds now equaling one full rotation. While I'm relieved that the program is functioning properly, it's perplexing why multiplying the expression by a factor of (1/2) was necessary for this result. Any insights into this behavior would be appreciated. Thank you.

The render function within my code includes the following expression:

earth.rotation.y += (2*Math.PI)/(24*60*2)

.

javascript rotation three.js modeling

Answer 1

Answer №1

requestAnimationFrame utilizes the optimal frame time for each frame, which may vary slightly and impact movement within seconds.

I cannot fully explain the remarkable outcome you achieved, but when a purely time-dependent movement is needed, one solution is to adjust the movement by the time elapsed since the last render:

var lastDate = new Date();

function render () {

    var now = new Date();
    var delay = now - lastDate;
    lastDate = now;

    earth.rotation.y += delay * your-rotation-coeff

    requestAnimationFrame( render );
    renderer.render( scene, camera );

}

However, new Date() is not the most precise JavaScript feature. It's performance.now(), which is not universally supported. Instead of writing out all the previous lines plus fallback code, three.js offers the handy Clock feature that simplifies this process:
```
var clock = new THREE.Clock();

function render () {

    earth.rotation.y += clock.getDelta() * your-rotation-coeff

    requestAnimationFrame( render );
    renderer.render( scene, camera );

}
```

Answer 2

requestAnimationFrame utilizes the optimal frame time for each frame, which may vary slightly and impact movement within seconds.

I cannot fully explain the remarkable outcome you achieved, but when a purely time-dependent movement is needed, one solution is to adjust the movement by the time elapsed since the last render:

var lastDate = new Date();

function render () {

    var now = new Date();
    var delay = now - lastDate;
    lastDate = now;

    earth.rotation.y += delay * your-rotation-coeff

    requestAnimationFrame( render );
    renderer.render( scene, camera );

}

However, new Date() is not the most precise JavaScript feature. It's performance.now(), which is not universally supported. Instead of writing out all the previous lines plus fallback code, three.js offers the handy Clock feature that simplifies this process:
```
var clock = new THREE.Clock();

function render () {

    earth.rotation.y += clock.getDelta() * your-rotation-coeff

    requestAnimationFrame( render );
    renderer.render( scene, camera );

}
```

What could be causing the rotation speed discrepancy of (1/2) in Three.js?

Answer №1

Similar questions

What could be the reason for my Angular component not updating its value?

I'm having trouble getting my button to work with addEventListener while using Ejs and Express. What could

Upon hitting submit, the form remains unresponsive

Tips for highlighting HTML syntax within JavaScript strings in Sublime Text

Exploring the creation of dynamic DOM elements within Angular

Limit access to route in ExpressJS only to internal redirects

How can I retrieve an array from an object containing both a property and an array in TypeScript?

Is there a way to identify the index of user input when using the .map method?

Error: Attempting to access property 'setData' of an undefined object results in a TypeError [Slider]

Troubleshooting Firebase AppCheck v8 in React: Encountering a 400 error message stating "App ID is Invalid: 'undefined'"

Performing a Mongoose query using the "find" method on multiple fields at once

Node.js does not allow for the usage of `.on` to monitor events until the client has been

Utilizing requirejs or grunt for concatenation and minification greatly enhances the performance of AngularJS implementations

"Modifying the content:url() with JavaScript: A step-by-step guide

Order of setTimeout calls in React's execution sequence

The MeshBasicMaterial in THREE.js successfully renders, while the MeshLambertMaterial does not produce the desired outcome

Validating uploaded files in Javascript and handling server upload operations

Encountering obstacles while trying to update an array in MongoDB with NodeJS

Is there an official IRC channel for YUI?