Unsteady motions in three.js Animation

Question

Unsteady motions in three.js Animation

I am experiencing issues with animation and movement in my three.js scene. Regardless of whether I move the camera by a very small amount or animate an object using Tween.js, the animation appears jerky with the object jumping around its axis of movement, indicating a potential rounding error in positioning.

The problem becomes more pronounced when I move far from the scene center (which is at vertex 0,0,0), for instance to vertex 0,8000000,0.

This issue occurs both when moving the camera and when moving objects.

I am utilizing standard example codes and libraries:

<script src="http://threejs.org/examples/../build/three.min.js"></script>
<script src="js/Detector.js"></script>
<script src="js/TrackballControls.js"></script>
<script src="js/stats.js"></script>
<script src="js/tween.min.js"></script>

I can provide a snippet of code here, although I'm unsure which part may be relevant.

View a video demonstration of the issue here:

Video of screen

EDIT:

Attempting to position the object and camera closer to the center (at XYZ:0,0,1000) results in reduced jitter, but the error is still noticeable: Second video available here

javascript three.js tween.js

Answer 1

Answer №1

Encountering two issues within a single question.

I managed to tackle them using two different methods.

Firstly, the issue of jerky movements of an object on camera movement. It gives the illusion that the object is sporadically jumping around its position, when in reality, it remains stationary while the camera moves (sometimes jumping during orbit or zoom). This discrepancy is due to a loss of precision as the distance from the center of the scene increases significantly (reaching about 10 million units).

The solution lies in either scaling down the size of the scene significantly or exploring alternative ways to maneuver the camera around the object without sacrificing precision.

To rectify this, simply move the object closer to the center of the scene at Vertex(0,0,0).

Secondly, the problem of erratic object movements during TWEEN transitions from point A to point B. This inconsistency stemmed from the rendering process, which was being triggered after a certain delay following the TWEEN.update() call. Consequently, the smooth transition of the object was not synchronized with the TWEEN calculations, resulting in slight overshooting and subsequent readjustments in each frame.

The remedy involves adjusting the positioning of the TWEEN.update() call within the render() function (which is called by animate()). By ensuring that the update occurs before the rendering, the fluidity of object movements can be preserved without discrepancies.

Previously:

function animate() { 
      render();
      TWEEN.update(); // as suggested by TWEEN.js documentation
      requestAnimationFrame( animate );
}

function render() {      
      renderer.render( scene, camera );         
}

Now:

function animate() { 
      render();
      requestAnimationFrame( animate );
}

function render() {      
      TWEEN.update(); // implementing this adjustment has proven effective      
      renderer.render( scene, camera );         
}

Though this issue may manifest in various scenes, it's less perceptible over shorter distances.

Answer 2

Encountering two issues within a single question.

I managed to tackle them using two different methods.

Firstly, the issue of jerky movements of an object on camera movement. It gives the illusion that the object is sporadically jumping around its position, when in reality, it remains stationary while the camera moves (sometimes jumping during orbit or zoom). This discrepancy is due to a loss of precision as the distance from the center of the scene increases significantly (reaching about 10 million units).

The solution lies in either scaling down the size of the scene significantly or exploring alternative ways to maneuver the camera around the object without sacrificing precision.

To rectify this, simply move the object closer to the center of the scene at Vertex(0,0,0).

Secondly, the problem of erratic object movements during TWEEN transitions from point A to point B. This inconsistency stemmed from the rendering process, which was being triggered after a certain delay following the TWEEN.update() call. Consequently, the smooth transition of the object was not synchronized with the TWEEN calculations, resulting in slight overshooting and subsequent readjustments in each frame.

The remedy involves adjusting the positioning of the TWEEN.update() call within the render() function (which is called by animate()). By ensuring that the update occurs before the rendering, the fluidity of object movements can be preserved without discrepancies.

Previously:

function animate() { 
      render();
      TWEEN.update(); // as suggested by TWEEN.js documentation
      requestAnimationFrame( animate );
}

function render() {      
      renderer.render( scene, camera );         
}

Now:

function animate() { 
      render();
      requestAnimationFrame( animate );
}

function render() {      
      TWEEN.update(); // implementing this adjustment has proven effective      
      renderer.render( scene, camera );         
}

Though this issue may manifest in various scenes, it's less perceptible over shorter distances.

Answer 3

Answer №2

I have devised another strategy to address the issue of losing precision in a vast scene.

Instead of compromising on precision for camera and object movements across long distances (e.g. coordinates XYS(1000000000,165464464665464464,0)), I opted to tackle the problem differently.

My solution involved creating a parent object that moves in the opposite direction of my ship. While my ship remains fixed at scene position XYZ(0,0,0), all other objects are nested within the parent object, which orbits around my ship in the opposite direction.

When I need to move my ship, rather than directly translating it with ship.translateX(10), I instead translate the parent object with parent.translateX(10*-1).

This approach ensures consistent precision over unlimited distances without the need to manage camera orbiting around the moving ship or adjust the skybox, as my ship always stays within the confines of the scene (preventing it from moving outside the skybox).

However, this solution does shift the challenge from one aspect to another, requiring accurate calculations for positions within the parent box and the relative positions of my ship. For further details, I posted an additional question here:

- not active as of 2021,

Alternatively, you can explore a similar solution discussed in this related query: How to get the global/world position of a child object?

For reference, refer to the documentation provided here: https://threejs.org/docs/#api/en/core/Object3D.getWorldPosition

Answer 4

I have devised another strategy to address the issue of losing precision in a vast scene.

Instead of compromising on precision for camera and object movements across long distances (e.g. coordinates XYS(1000000000,165464464665464464,0)), I opted to tackle the problem differently.

My solution involved creating a parent object that moves in the opposite direction of my ship. While my ship remains fixed at scene position XYZ(0,0,0), all other objects are nested within the parent object, which orbits around my ship in the opposite direction.

When I need to move my ship, rather than directly translating it with ship.translateX(10), I instead translate the parent object with parent.translateX(10*-1).

This approach ensures consistent precision over unlimited distances without the need to manage camera orbiting around the moving ship or adjust the skybox, as my ship always stays within the confines of the scene (preventing it from moving outside the skybox).

However, this solution does shift the challenge from one aspect to another, requiring accurate calculations for positions within the parent box and the relative positions of my ship. For further details, I posted an additional question here:

- not active as of 2021,

Alternatively, you can explore a similar solution discussed in this related query: How to get the global/world position of a child object?

For reference, refer to the documentation provided here: https://threejs.org/docs/#api/en/core/Object3D.getWorldPosition

Unsteady motions in three.js Animation

Answer №1

Answer №2

Similar questions

Error encountered while parsing a file: JSON parsing failed due to an unexpected token 'g' at position

"Encountering an issue with undefined request.body in Express after using

Generates a dynamic HTML table using JSON data through JavaScript

React application experiencing continuous SpeechRecognition API without stopping

Display progress bar dialogue upon submission

Troubleshooting Problem with Facebook Messenger Bot Webhook

Tips for designing a pre-selection process

Transform a series of items into an array

Implementing JavaScript to provide personalized error messages for empty form fields

"Tips for positioning the center of a map with the help of external latitude and longitude

Execute a function once the user has finished typing

Converting Excel Cell Content to HTML Format

What is the best way to declare a TypeScript type with a repetitive structure?

Determining the Visibility of a Control within a Container with Scrollbars

FileReader and Socket.io uploader: each new upload builds upon the previous uploads

Encountering a parsing error while trying to fetch and parse XML using

Extending the rules and requirements of VInput

JavaScript .indexOf array method not functioning properly in Internet Explorer versions 7 and 8

What is the best way to target changing elements displayed by *ngIf?

Error in Dimplejs: Line is not visible when series is empty