Exporting morph targets from Blender to Three.js

Question

This is an example of what I am trying to achieve: http://threejs.org/examples/#webgl_animation_skinning_morph

I am exporting a 3D model from Blender (v 2.73) to Three.js (r70), using the exporter from Three.js r69.

The model has a skeletal animation, and a number of Shape keys with different facial expressions (eyes open/closed, etc.).

Exporting the skeletal animation to Three.js works fine, but I'm at a loss as to how to export the morph targets correctly.

The exporter has a check box for 'Morph animation', but enabling it results in a very large file, where each frame of the timeline produces a morph target. (The timeline has the skeletal animation).

The json file for the knight model (http://threejs.org/examples/models/skinned/knight.js) has 4 morph targets, one for each facial expression. This is pretty much exactly what I want, but I have not been able to reproduce it.

Any tips on how to setup the blender file / blender to three.js workflow would be greatly appreciated.

Answer 1

Just to close this topic:

After some trial and error, we ended up using one keyframe in Blender for each morph target (shape key) we wanted to export. The influence of the morph target was 1 (maximum) on that frame. So for 3 morph targets we had 4 frames (3 + default).

The skeletal animation did not have to be on the timeline for it be exported correctly.

This works with the r69 exporter, and we didn't try any of the newer versions.

Answer 2

The COLLADA file format has a support for Shape-Keys (called morph keys there). If you have a full featured COLLADA-importer for your platform you should be able to import and use them without additional work.

You can proof this yourself by exporting you blender model with Shape-Keys to COLLADA-file and import that COLLADA-file back into blender. All Shape-Keys and weights are still there :)