Blender animation - mattzhao92/Planet-Blitz GitHub Wiki

The standard three.js Blender exporter script exports animations as a list of animations.

"animations" : [{"name":"ArmatureAction","fps":24,"length":4.08333,"hierarchy":[{"parent":-1,"keys":[{"time":0,"pos":[1.62171,1.32006,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]},{"time":0.0416667,"pos":[1.62171,1.32006,1.77362e-07],"rot":[0,0,-0,1]},{"time":2,"pos":[1.62171,4.9867,1.77362e-07],"rot":[0,0,-0,1]},{"time":4.08333,"pos":[1.62171,1.30368,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]}]},{"parent":0,"keys":[{"time":0,"pos":[-1.52522,5.00929,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]},{"time":2,"pos":[-1.52522,1.23815,1.77362e-07],"rot":[0,0,-0,1]},{"time":4.08333,"pos":[-1.52522,4.81948,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]}]}]}]

However, what actually works is:

"animation" : {"name":"ArmatureAction","fps":24,"length":4.08333,"hierarchy":[{"parent":-1,"keys":[{"time":0,"pos":[1.62171,1.32006,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]},{"time":0.0416667,"pos":[1.62171,1.32006,1.77362e-07],"rot":[0,0,-0,1]},{"time":2,"pos":[1.62171,4.9867,1.77362e-07],"rot":[0,0,-0,1]},{"time":4.08333,"pos":[1.62171,1.30368,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]}]},{"parent":0,"keys":[{"time":0,"pos":[-1.52522,5.00929,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]},{"time":2,"pos":[-1.52522,1.23815,1.77362e-07],"rot":[0,0,-0,1]},{"time":4.08333,"pos":[-1.52522,4.81948,1.77362e-07],"rot":[0,0,-0,1],"scl":[1,1,1]}]}]}

Other than that, these two tutorials are fairly reliable:

• Jumping cubes
• More detail

Three.js supports only one animation. It is necessary to chain all animations into a single animation for Blender. In three.js, animations can be started at certain time points.

Example here

var currentSequence = 'standing'; 

function(render) {
	if (animation) animation.update(delta);   
	if (currentSequence == 'standing') {      
		if (animation.currentTime > 4) {         
			animation.stop();         
			animation.play(false, 0); // play the animation not looped, from 0s
			      
		}   
	} else if (currentSequence == 'walking') {      
		if (animation.currentTime <= 4 || animation.currentTime > 8) {         
			animation.stop();         
			animation.play(false, 4); // play the animation not looped, from 4s
			      
		}   
	}
}

Old discussion

Interesting links:

• http://devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
  • Really solid tutorial. This was endorsed by in the book I'm using for reference, so we know this should work.
• http://blog.romanliutikov.com/post/60461559240/rigging-and-skeletal-animation-in-three-js

Methods of animation: all are supported by three.js

• Morph targets (vertices are deformed)
• Skeletal animation

There are two main forms of animating models. Using morph targets or using skeleton animation. When you use morph targets you morph your model from one keyframe to the other to create an animation. When you use skeleton animation you animate the model by moving the bones. Based on the bones' movement, Three.js will update the vertices attached to that bone.

The import process itself is straightforward, but our animations may require tweaking before they can be used in Three.js:

When loading models, a good place to start is just printing out the model to the console. Depending on the editor you might need to manually create new models, update materials, or fix other small issues.

For some animation examples, see: http://threejs.org/examples/ - animations section