Currently, I am working on developing an animation system for my three.js project which involves utilizing a JSON file. While I have successfully implemented the animation playback, I am facing an issue where objects immediately move to their designated locations instead of smoothly transitioning over time. The JSON file contains data specifying where a particular object should be located at specific intervals. For instance:
JSON File:
{
"right": {
"position": {
"0.0": [0, 0, 0],
"0.25": [0, 1, 0],
"0.5": [1, 1, 0]
}
}
The JSON file denotes the position of the object, timing of the changes in position, and the corresponding coordinates.
Code:
for (const [key, value] of Object.entries(json.position.right))
if(seconds === json.position.right[key]) {
obj.position.x = json.right.position[key][0];
obj.position.y = json.right.position[key][1];
obj.position.z = json.right.position[key][2];
}
}
In this code snippet, I iterate through the JSON file's right cube position (which signifies when the position changes occur). If the seconds match the specified keyframe, the object is moved to that location.
My main query pertains to achieving smooth movement between keyframes for the object.
Check out this example:
Access all the code here:
I leveraged Blockbench to export models as .OBJ files, materials as .MTL files, and animations as .JSON files.
If my explanation seems convoluted, I apologize and would greatly appreciate any assistance.