Recreated keyframe example: The same functionality, but only 7% animation code

[jostschmithals]

For this PR I recreated the Collada keyframe example (the blue pump) 1:1 with pure JSON and three.js core animations.

The reason: The Collada example seems to be the only example that demonstrates a complex keyframe animation without bones or morph targets (moving/rotating whole objects instead). This fact can cause people to assume that keyframe animations of that kind require a Collada model import, the special additional animation scripts used in the Collada example, and a plenty of complex code to make it work (see for example this recent stackoverflow question/answer).

But of course this is not true: Using a JSON file (instead of a Collada file) and the core animation system (instead of the additional animation scripts) makes things much simpler; actually it's a three-liner now 😉.

Here an impressive comparison:

Converting this special model from Collada to JSON was some manual work (neither Blender nor Clara.io were able to play the Collada animations of this model correctly - I think because of some inconsistencies in the original file -, so that both programs couldn’t be used for converting in this case); thus converting from Collada to JSON first could perhaps not be recommended for each use case.

But this alternate version of the keyframe example could vice versa prevent people from unnecessarily converting their models to Collada first, only because they are misleaded to believe that this would be the preferred way to play complex automated keyframe animations in three.js.

[mrdoob]

Nice nice!

[mrdoob]

Thanks!

[bhouston]

Sweet! The Collada animation example pre-dated the animation system rewrite.

I think the issue is that Clara.io uses Blender to create ThreeJS JSON files and Blender has some limitations regarding this scene, I suspect this file worked properly in Clara.io???

[jostschmithals]

@bhouston Different from your assumption it was not only the export to three.js which was problematic. To be honest, I didn't try these exports very thoroughly, since neither Blender nor Clara.io were able to play the animations of this Collada model correctly.

Clara.io and Blender had quite different problems. Here two screenshots:

Clara.io (arranging things in places where they should not have been):

Blender (starting ca. 100 units under the grid, then suddenly popping up in frame 170, and with an end state like the one shown here):