Three.js: Blender exporter doesn't export shape keys

Created on 22 Apr 2016  Â·  11Comments  Â·  Source: mrdoob/three.js

Description of the problem

Many of the Blender examples have morph targets, however I've been trying to export a mesh from Blender and morph targets aren't exported.

You can see shape keys are set up in Blender, and keyed in the "Shape Key Editor" view:
screen shot 2016-04-21 at 4 43 43 pm
screen shot 2016-04-21 at 4 43 41 pm

However on export to JSON there are no morph targets. Only one empty array under they "geometry" key, "morphTargets":[],.

Exporter settings include morph:

screen shot 2016-04-21 at 4 45 33 pm

You can download the .blend file in question to try this out: eye-test.blend.zip

Three.js version
  • ✅ Dev
  • ✅ r76

Most helpful comment

UPDATE: I found a workflow that works for me:

  1. comment out lines 472->503 of exporter/api/object.py in your blender add-ons folder
  2. restart blender
  3. export your file with the following settings, note that you must choose "Geometry", _not_ "BufferGeometry".

screen shot 2017-03-21 at 1 43 02 pm

  1. then, on the three.js side you can load and initialize morph targets with code like this:
var objectLoader = new THREE.ObjectLoader();

objectLoader.load("path/export.json", (group) => {
   group.children[0].material.morphTargets = true;
   group.children[0].material.needsUpdate = true;
   group.children[0].updateMorphTargets();
   scene.add(group.children[0]);
});

and modify morph target influences by modifying the mesh.morphTargetInfluences, which contains floats between 0. and 1. corresponding to each shape key. seems like no "needsUpdate" calls are necessary, you can just set them and the mesh will update. Like so:

mesh.morphTargetInstances[0] = 1.

All 11 comments

cc @phfatmonkey

Hmm, I didn't touch the morph targets...do you know if this working before PR #8412?

With my same model .blend file:

$ git show --no-patch --format=short 362cb796d004953274e4986520402de79a68cac
    commit 362cb796d004953274e4986520402de79a68cac5
    Author: Ryan Lee <***>

        fixed skinned mesh export

$ git checkout 362cb796d004953274e4986520402de79a68cac5^
$ cp -r utils/exporters/blender/addons/io_three ~/Library/Application Support/Blender/2.77/scripts/addons

The older version kept crashing until I unchecked all the bone / rigging etc options. On export it added this line:

"morphTargets":"LidGeometry.3.morphTargets.json"

And that file LidGeometry.3.morphTargets.json, contains the morph targets.

I'm not sure how this is actually supposed to work, since the example files show the model json file having the morphTargets baked in, eg this horse.json file from this example. But it looks like the older version of the exporter can export morph targets (to a separate file at least), and the newer one can export rigs.

Actually, I lied. The file pre-your-PR export of LidGeometry.3.morphTargets.json just contains an empty array. I didn't inspect it until now. I'll keep investigating. I suspect there's something I need to do to trick the exporter into realizing there's morph targets in Blender, like tweening them on the main timeline.

Ok, great, thanks for looking into it.

Ok, finally got morph targets to appear in the file. The trick, which I could only find by digging through the code, is to uncheck "Apply Modifiers." Have a look at these lines:

https://github.com/mrdoob/three.js/blob/master/utils/exporters/blender/addons/io_three/exporter/api/object.py#L488-L499

bpy.ops.object.modifier_add(type='EDGE_SPLIT')
bpy.context.object.modifiers['EdgeSplit'].use_edge_angle = False
bpy.context.object.modifiers['EdgeSplit'].use_edge_sharp = True
bpy.ops.object.modifier_apply(apply_as='DATA', modifier='EdgeSplit')

An EDGE_SPLIT modifier is applied to the mesh. This appears to completely clobber shape keys, since it modifies the topology.

This was added March 16th by @s9k in this pull request https://github.com/mrdoob/three.js/pull/8391

Additionally, although I'm not sure how to reproduce it, one case of me messing with the exporter crashed the python script with "Cannot apply EDGE_SPLIT to a mesh with shape keys." I don't remember which iteration of settings did this.

I do suspect this is a bug and request @s9k's analysis to know why the edge split modifier is needed.

@DelvarWorld Thanks for your great inspection and it helps a lot!
I comment out the 4 corresponding lines in io_three/exporter/api/object.py and finally have the export working with shape keys :)

I'm still seeing this issue, I've tried commenting out the code above, and have tried exporting without applying modifiers but still no luck. Using Blender v 2.78, and the latest io_three code from the Blender repo. Attached are screenshots of my export settings, a txt file of the debug log, the source .blend scene, and finally the json output which is missing morph targets.

Thanks a lot, let me know if there's any more info I can provide.

animtest2.json.zip

animtest2.blend.zip

io_three.log.txt

screen shot 2017-03-21 at 12 19 23 pm

UPDATE: I found a workflow that works for me:

  1. comment out lines 472->503 of exporter/api/object.py in your blender add-ons folder
  2. restart blender
  3. export your file with the following settings, note that you must choose "Geometry", _not_ "BufferGeometry".

screen shot 2017-03-21 at 1 43 02 pm

  1. then, on the three.js side you can load and initialize morph targets with code like this:
var objectLoader = new THREE.ObjectLoader();

objectLoader.load("path/export.json", (group) => {
   group.children[0].material.morphTargets = true;
   group.children[0].material.needsUpdate = true;
   group.children[0].updateMorphTargets();
   scene.add(group.children[0]);
});

and modify morph target influences by modifying the mesh.morphTargetInfluences, which contains floats between 0. and 1. corresponding to each shape key. seems like no "needsUpdate" calls are necessary, you can just set them and the mesh will update. Like so:

mesh.morphTargetInstances[0] = 1.

I can confirm this, at long last is also working for me in r86 DEV. Turning it to normal geometry and unchecking apply modifiers. And commenting the lines in the .py file.

I missed your comment @flimshaw about the material flags though. Finally my shape animation is coming across, put in clipactions and mixers and playing (that happened when i set the material flags.

Why these flags are in material is beyond me however. Shape animation (or morph blendshape or whatever, shape animation describes it best) is transforming the positions of vertices on a mesh. I don't see what that has to do with a material.

Now victory dance and fixing the timing, cause it dont look right....

The JSON Blender exporter has been removed with R93 (#14117).

Also see: https://threejs.org/docs/#manual/introduction/Loading-3D-models

Was this page helpful?
0 / 5 - 0 ratings