Blender exporter won't export animation

Questions
,
1

Could someone help me out with exporting a mesh with an animation from blender? I’ve seen a few tutorials but three.js has changed so much especially with how the animation system works since those tutorials. What I’m doing is selecting only the mesh then going to File > Export > Three.js. I’m using these export settings but the .json file that the exporter gives me doesn’t contain any references to the animation that I’ve given to the mesh. It looks like this:

{
    "data":{
        "attributes":{
            "normal":{
                "array":[/*...*/],
                "type":"Float32Array",
                "itemSize":3
            },
            "position":{
                "array":[/*...*/],
                "type":"Float32Array",
                "itemSize":3
            }
        },
        "index":{
            "array":[/*...*/],
            "type":"Uint16Array",
            "itemSize":1
        }
    },
    "metadata":{
        "normal":344,
        "type":"BufferGeometry",
        "position":344,
        "generator":"io_three",
        "version":3
    }
}

.blend

What am I doing wrong? I’m using three.js r85 and blender 2.78.
Thanks

2

Hello CasualKyle,

It seems there is an issue with the export geometry type. The export option for buffergeometry skinning animations is not working, it has to be Geometry.

Plus, the armature needs to be in the “Rest Position” before it can be exported.

Hope this helps…

3

Thanks so much for the response! It appears the animation data is now exporting correctly. However, I can’t help but feel like something is still not right because I can’t get the animation to play. Here is a minimal code example would you or anyone else know what’s wrong?

<html>
<head>
	<title>Animation Testing</title>
	<style>
		body { margin: 0; }
		canvas { width: 100%; height: 100% }
	</style>
</head>
<body>
	<script src="three.js"></script>
	<script>
		var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

		camera.position.set(2, 2, 2);
		camera.lookAt(new THREE.Vector3(0, 1, 0));

		var clock = new THREE.Clock();

		var loader = new THREE.JSONLoader;
		var mixer;
		var set = false;

		loader.load("./player.json", function(geometry) {
			var material = new THREE.MeshBasicMaterial({skinning: true});
			var skinnedMesh = new THREE.SkinnedMesh(geometry, material);
			scene.add(skinnedMesh);

			mixer = new THREE.AnimationMixer(skinnedMesh);
			var walkAction = mixer.clipAction(geometry.animations[0]);
			walkAction.play();
			set = true;
		});

		function render() {
			if(set)
				mixer.update(clock.getDelta());

			renderer.render(scene, camera);
			requestAnimationFrame(render);
		};

		render();
	</script>
</body>

source

Thanks

4

Re @CasualKyle,

There might be an issue with the latest exporter (see bottom of thread):

https://github.com/mrdoob/three.js/issues/8511

I have tested a simple blend and getting the same results ;(

Try to monitor the post above or/and add a new bug request with your files and help the developers fix the problem sooner…

5

@INF1N1T

Okay I see. Thanks so much for helping me out.

6

@CasualKyle You are welcome!

7

After a bit of investigation, if you leave the armature in pose position and uncheck “Apply Modifiers” in the export settings, it appears to work correctly.

8

Hi @CasualKyle, given your post I see you evidently know the answer to this question:

Can you PLEASE help?
I have been desesperately searching for a solution for 3 weeks without hope…
Thanks,
Rod