1
$\begingroup$

I've been trying to exporting animation with shapekey to threejs. The animation looks fine in Blender, but it completely doesn't work in threejs, the animation is playing part that is animated by shapekey are not working.

I am trying to export it to gltf. the following image is the setting I used when i tried to export the gltf file.

enter image description here

enter image description here

Improve this question
$\endgroup$
2
  • $\begingroup$ Can you provide more info please ? what format are you exporting to? $\endgroup$
    – B.Pader
    Oct 18, 2022 at 11:56
  • 1
    $\begingroup$ Hi thank you for the replied, I have edit the question, and provided a blend file with the problem model $\endgroup$
    – Kenny
    Oct 18, 2022 at 12:00

2 Answers 2

Reset to default
2
$\begingroup$

Well, actually your file is working. Nothing is broken.

I tried to see what is the result of the exported .glb file inside the three js viewer at this url: https://gltf-viewer.donmccurdy.com/

What is different is that the shapekeys are not visible as an animation but as a morph target.

Try putting your mesh inside this viewer, and you'll be able to see this :

gLTF viewer morph targets

On the right side of your screen, there is a lot of dropdown menus. Open the Animation and Morph Targets ones.

Your shapekeys animation can be found under the Morph targets -> "Left Eye Large v2" and "Right Eye Large v2".

On the screenshot, I put them at a value of 1. This value can be changed in the range [0 - 1] and for each of the concerned meshes.

So I think you should try to use different approach inside your three js code to be able to play it as an animation.

Check out the example of three JS regarding morph targets

https://threejs.org/examples/webgl_morphtargets_sphere.html

Hope this will help ! :)

Improve this answer
$\endgroup$
2
  • $\begingroup$ Thank you so much for looking into my model, but is there a way where I can change the animation to morph target? I have exported a few model with the same rigging method before, all of the prior ones are able to directly play the shapekey with the animation. Only this one seem to have this problem.... $\endgroup$
    – Kenny
    Oct 18, 2022 at 13:58
  • $\begingroup$ Maybe try a rigging approach for your animations. A Bone as a driver for your shapekeys for example, so it might allow you to play the animation "as other" in your three js code $\endgroup$
    – B.Pader
    Oct 20, 2022 at 5:29
0
$\begingroup$

A reminder for myself and for those who encounter a similar problem. List of things not to do, in order to export a glb with working shape key from the get go.

  1. don't attach or reattach any part of the model
  2. don't reset/apply tranform(shift A) after animation
  3. if the option for the part with shape key is separable (I.E. eyeball not attach to the main body), then let it be separated.

The shapekey will works in blender even if you did the thing mentioned above, but it might not work when you export it as glb.

Improve this answer
$\endgroup$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .