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();

Which exporter are you using? The newest, github.com/KhronosGroup/glTF-Blender-Exporter, is likely the one you will want. But, it exports glTF2.0 and so you will also need to use THREE.GLTF2Loader. — Don McCurdy
I was using the one at: github.com/Kupoman/blendergltf, which seems to export GLTF 1.0. I take it the one under Khronos Group is the official one? I tried that one and switched to GLTF2Loader, and it is not animating either... and I've lost the material I had applied as well. At this point, I've tried three different paths to GLTF. So, my suspicion is that I'm doing something wrong in my JavaScript. I suppose the way I'm doing my animation in Blender could be wrong too, but Three's JSON exporter add on works fine. — loraan
The Khronos Group extension is where active work is happening now. It's very possible there are issues to iron out. Could you file an issue on GitHub (ideally with your .blend file)? Without seeing the file, I don't know if the animation is even present in the .gltf at all. I'm also not an expert in Blender, but the extension authors would be. — Don McCurdy
Just to follow up on this: I filed an issue, and it was recommended I try the dev branch of Three.js. That fixed the issue I was having. — loraan
Just to create the connection here, for others who may have the same issue: github.com/KhronosGroup/glTF-Blender-Exporter/issues/10 — Marco13

loraan loraan · Accepted Answer · 2017-07-12T18:27:13

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.

Animations in Three.js with GLTF from Blender Exporter

1 Answers