I’m trying to show the animation of a skeleton with Three.js SkeletonHelper and made up of 25 joints from a JSON. This JSON has been created from a CSV file where it is only specified how the x, y, z coordinates of each joints of the skeleton changes over time. Here is an image of the skeleton joints. The content of the JSON is the hierarchy of the bones and the keyframes for each of them.
The hierarchy of bones is as follows:
"bones": [{
"parent": -1,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "0_Spine_Base"
}, {
"parent": 0,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "1_Spine_Mid"
}, {
"parent": 20,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "2_Neck"
}, {
"parent": 2,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "3_Head"
}, {
"parent": 20,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "4_Shoulder_L"
}, {
"parent": 4,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "5_Elbow_L"
}, {
"parent": 5,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "6_Wrist_L"
}, {
"parent": 6,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "7_Hand_L"
}, {
"parent": 20,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "8_Shoulder_R"
}, {
"parent": 8,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "9_Elbow_R"
}, {
"parent": 9,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "10_Wrist_R"
}, {
"parent": 10,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "11_Hand_R"
}, {
"parent": 0,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "12_Hip_L"
}, {
"parent": 12,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "13_Knee_L"
}, {
"parent": 13,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "14_Ankle_L"
}, {
"parent": 14,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "15_Foot_L"
}, {
"parent": 0,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "16_Hip_R"
}, {
"parent": 16,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "17_Knee_R"
}, {
"parent": 17,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "18_Ankle_R"
}, {
"parent": 18,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "19_Foot_R"
}, {
"parent": 1,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "20_Spine_Shoulder"
}, {
"parent": 7,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "21_Hand_Tip_L"
}, {
"parent": 7,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "22_Thumb_L"
}, {
"parent": 11,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "23_Hand_Tip_R"
}, {
"parent": 11,
"pos": [0, 0, 0],
"rotq": [0, 0, 0, 1.0],
"scl": [1, 1, 1],
"name": "24_Thumb_R"
}
And each of the keyframes looks like this:
{
"pos": [-0.0827139, -0.3065069, -0.08963513],
"time": 34.1326514,
"scl": [1, 1, 1]
}
Although the data that contains the keyframes for each joint is correct, the skeleton is not displayed correctly. For example, the arms are shown above their position, the feet appear straight… In this image you can see how they are currently shown and in the following how they should be shown.
In this link to a Codepen you can see how it is displayed.
What could be the reason that it is displayed like this? Thank you in advance!