Animations in Three.js with GLTF from Blender Exporter

Question

I am experimenting with GLTF and Three.js, and I am having a devil of a time trying to get animations to work. My end goal is to be able to create keyframe animated meshes in Blender, export them to GLTF, and use them in Aframe-based WebVR scenes. At the moment, however, I'm just trying to get them to load and animate in a simple Three.js test harness page.

I'm trying to do a very basic test to get this working. I took Blender's default cube scene, removed the camera and the light, and created a keyframe animation to spin the cube 360 degrees around the Z axis. I then exported that cube to GLTF. First, I tried the GLTF export add on, and then I tried exporting it to Collada and using Cesium's tool to convert it to GLTF. Both versions of the GLTF file load and render the cube properly, but the cube does not animate.

I was able to use this same blend file and export to JSON using Three's own JSON export add on for Blender, and everything works fine there. So, I feel like I must be doing something stupid in my Javascript or there is something about GLTF I am missing.

Can anyone tell me what I'm doing wrong here? I'm getting to hair-yanking time here.

Here's the Javascript I'm trying to use for the GLTF version (specifically the binary version from Cesium's tool):

            var scene = null;
            var camera = null;
            var renderer = null;
            var mixer = null;
            var clock = new THREE.Clock();

            function init3D() {
                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

                renderer = new THREE.WebGLRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                document.body.appendChild(renderer.domElement);

                var ambientLight = new THREE.AmbientLight(0x080818);
                scene.add(ambientLight);

                var pointLight = new THREE.PointLight(0xffffff, 1, 100);
                pointLight.position.set(-5, 1, 5);
                scene.add(pointLight);

                camera.position.z = 5;
                camera.position.y = 1.5;
            }

            function loadScene() {              
                // Instantiate a loader
                var loader = new THREE.GLTFLoader();

                // Load a glTF resource
                loader.load('gltf/SpinCube.glb',
                    function (gltf) {
                        var model = gltf.scene;
                        scene.add(model);

                        mixer = new THREE.AnimationMixer(model);
                        mixer.clipAction(gltf.animations[0]).play();

                        render();
                    });
            }

            function render() {
                requestAnimationFrame(render);
                var delta = clock.getDelta();
                if (mixer != null) {
                    mixer.update(delta);
                };
                renderer.render(scene, camera);
            }

            init3D();
            loadScene();

Answer 1

The problem appeared to have been a bug in the version of Three.js's GLTF2Loader that I was using at the time. I pulled a copy of Three.js from the dev branch, and my animations showed correctly.