Exporting morph targets from Blender to Three.js

Question

This is an example of what I'm 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 skeletal animation and several Shape keys with different facial expressions (eyes open / close, etc.).

Exporting skeletal animation to a Three.js file is great, but I don’t understand how to properly export morphing targets.

The exporter has a checkbox for Morphine Animation, but turning it on leads to a very large file, where each frame of the timeline creates a morphing target. (The timeline has skeletal animation).

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

Any advice on how to set up your blender file / blender for the three.js workflow is welcome.

Answer 1

Just to close this thread:

After some trial and error, we ended up using one keyframe in Blender for each morphing (shape) goal we wanted to export. The effect of the morphing target on this frame was 1 (maximum). Thus, for 3 morphing purposes, we had 4 frames (3 + by default).

Skeletal animation does not have to be on the timeline so that it can be exported correctly.

This works with the r69 exporter, and we have not tried any of the new versions.

Answer 2

The COLLADA file format has support for Shape-Keys (the so-called morphological keys). If you have a full-featured COLLADA importer for your platform, you can import and use them without additional work.

You can confirm this yourself by exporting the blender model using Shape-Keys to the COLLADA file and importing this COLLADA file back into the blender. All Shape-Keys and weights still exist :)