Three.js: FBX bones rotate correctly, while GLTF bones rotate bizarrely

Question

I have a dynamic model working with an FBX file using Three.js FBXLoader, but out of convenience I wanted to use a GLTF/GLB file since it includes the textures in the same file. I loaded the FBX file in Blender 2.9 and exported it as GLB file. The GLB file renders correctly using the GLTFLoader but required a different rotation offset to put in the right orientation on setup.

Both the FBX and GLB file contain a SkinnedMesh with a similar bones array. I noticed that matrixWorldNeedsUpdate is false for the GLB model bones, but it's true by default with the FBX. There could be other differences, but I didn't explore other aspect of hierarchy more, like the matrix fields.

Anyway, when dynamically rotating the bones from the GLB file it almost seems like the pivot point is somewhere else. I'm updating the local rotation parameter as I should, so I don't know why it's manipulating the Bone in this fashion. It's rotating around the correct axis, so it just doesn't seem like it's using the correct local rotation.

for (let i = 0; i < 20; i++)
{
    section1Bones[i].setRotationFromEuler(new THREE.Euler(0, 0, updatedSection1Vals[i], 'XYZ' ))
    section2Bones[i].setRotationFromEuler(new THREE.Euler(0, 0, updatedSection2Vals[i], 'XYZ' ))
    section3Bones[i].setRotationFromEuler(new THREE.Euler(0, 0, updatedSection3Vals[i], 'XYZ' ))
}

Answer 1

Sometimes it's really the simplest thing. So unlike the FBX, the GLB includes separate components like the scene component which holds the 3D models. Since I had only one model I added the entire scene object into the Three.js scene and was rotating that along with the bones. This caused the issue, so I just included the 3DObject contained in the scene components children of the loaded GLB file and the bone rotations were fixed.