I'm currently working on a Three.js application where I am creating a grid to display various objects. These objects are rendered on the grid based on their positions, which are obtained from data fetched from a REST API that I poll every 300 milliseconds. Presently, I am making the fetch calls within the animate() function and checking if 300ms have passed since the last request. Once I retrieve the data from the API, I iterate through all mesh objects and update their positions to reflect the new data.
However, I am encountering an issue with the smooth movement of the objects between positions - they seem to "jump" on the grid when the new position is set. How can I ensure that the objects move smoothly? Is there a more efficient way to update object positions and handle asynchronous data from the API?
I haven't included my code here as it is quite lengthy and not entirely relevant...
EDIT: - additional information
Within my animate function, I fetch data in order to add new objects to the scene or update the positions if the item already exists. Here's an example of the code snippet to help illustrate what I am trying to achieve:
const objects = {}; // This holds all Mesh objects in the scene
function animate(){
if (new Date().getTime() - lastTime > 300){
axios
.get(DATA_URL)
.then(data => {
/** Data is an array of objects to be added or updated in the scene.
* I iterate over the data array to check if the item already exists
* in objects or not. If it does exist, I update the Mesh positions,
* otherwise, I create a new mesh and add it to the scene.
*/
data.forEach(item => {
let mesh;
if (objects[item.id]){
mesh = objects[item.id]
}else{
mesh = // Create new mesh
objects[item.id] = mesh
}
// update position
mesh.position.set(item.x, item.y, item.z);
})
})
}
}