Three.js: Box Animated glTF model changes size as it rotates (r83 or Later)

[cx20]

Description of the problem

I tried to display the Box Animated glTF model with the latest version of Three.js + glTF Loader, However, it seems that animation movement is not correct.
https://cx20.github.io/gltf-test/examples/threejs/index.html?model=BoxAnimated&scale=0.5

Three.js r82 + glTF Loader is OK
http://jsdo.it/cx20/gnrt

Three.js r83 (or Later) + glTF Loader is NG
http://jsdo.it/cx20/iT08

This model has to animate as follows.

Three.js version

• [x] Dev
• [x] r83
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] Linux
• [ ] Android
• [ ] IOS

Hardware Requirements (graphics card, VR Device, ...)

[takahirox]

I've confirmed this bug and figured out how to fix.
I'll make PR soon.

The root issue is here in GLTFLoader

https://github.com/mrdoob/three.js/blob/d8e8e579699492534b56aa2a763cd45beecb3a86/examples/js/loaders/GLTFLoader.js#L274

It always generates KeyframeTrack regardless to data type but
it should generate proper keyframe track instance corresponding to data type.
(eg. QuaternionKeyframeTrack for quaterinon)

[cx20]

I confirmed the fix and updated the following status :)
https://github.com/cx20/gltf-test