Jerky animated movements in three.js Animation

Question

Hi i have problem with animation and movement in my three.js scene. When I move my camera (even by 0,0000001%)(by THREE.TrackballControls OR THREE.OrbitControls) or when I animate object using Tween.js, my animation is very jerky, object is jumping durning animatinon around the axis of movement, look like it is error with rounding in position.

Problem is bigger, when i move far from scene center (senter is on vertex (0,0,0)) for example I'm on vertex (0,8000000,0) and problem is bigger.

It is doing when I move camera or move object.

Im using standard example codes and satndard 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 will be post a part of code here, but i don't know which part of code..?

Video of problem here:

Video of screen

EDIT:

i try to move positions of object and camera close to the center (on XYZ:0,0,1000), it is much less jitter, but error is still remarkable: Video 2 here

Answer 1

There are two problems at one question.

I solved it by 2 ways.

One is Jerky movements of object on camera move. It looks like object is jumping around his position, but he is not moving, and camera is moving (and jumping while orbit or zoom). This is caused by loss of precision during distance from the center of scene (it was about 10 millions).

Scene simple can not be so big, or it is needed to find another solution to move camera around object without loss of precision.

Solution is to move object closer to the center of scene Vertex(0,0,0).

Second is jerky moving of object during TWEEN movement from point A to point B. This was caused by render. It was inititated in animate() function after (some ms later) the than TWEEN.update(). That means, the time of object smooth movement was inactual in the moment of TWEEN calculation. In the next frame TWEEN calculated little bit mote than animated, and object is jumped to correct place. Repeated each frame.

Solution is to put TWEEN.update() call to render() (function initiated by animate() - initiated in the same time than render, should be in manual. for TWEEN. (thank you for TWEEN.js its great work SOLE!)).

before:

function animate() { 
      render();
      TWEEN.update(); // this is recommended by TWEEN.js documentation
      requestAnimationFrame( animate );
}

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

after:

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

function render() {      
      TWEEN.update(); // and this is working for me      
      renderer.render( scene, camera );         
}

This problem should be in every scene, but on small distances is not visible.

Answer 2

I have another solution for lose precision for a huge scene.

I decide to make better change problem with loose precision for camera and object moving on long distances (for example at coordinates XYS(1000000000,165464464665464464,0)).

I made a parent object which is moving in opposite direction than my ship. My ship is always on scene position XYZ(0,0,0) and all other meshes are in a parent object which is moving in opposite direction of my flight (moving around my ship).

When i want to move my ship i change using ship.translateX(10) to parent.translateX(10*-1).

Effect the same but precision will be always correct on unlimited distances. Also i dont need to handle with camera orbiting moving ship, and i do not need to move skybox, because of still standing with my ship at the scene position (my ship cant move out from the skybox).

But it is mean that I changed one problem to another, how correctly calculate positions in parent box and positions of my ship. Made another question here:

https://stackoverflow.com/questions/25771604/coordinates-of-objects-in-parent-box-towards-another-parent-box - not valid at 2021,

so there is same solution in another question How to get the global/world position of a child object?

and here is documentation https://threejs.org/docs/#api/en/core/Object3D.getWorldPosition