Importing a Rigged Model into ThreeJS

Questions
, , , ,
1

I searched every possible stackoverflow questions, forums, demos and examples all across the web without luck.

Can anyone tell me how to export a Rigged model into ThreeJS? I tried both with Blender and 3d Studio Max without luck. With Blender I get “Armature is not a valid mesh object”.

Please help. Thank you so much in advance.

2

Have you seen this github issue?

https://github.com/mrdoob/three.js/issues/9492

3

Thanks for the reply.

Yes, I have seen it unfortunately :confused:
It didn’t help.

I believe we exported a rigged object by removing the armature in the “modifier” tab and exporting the mesh and the armature by selecting them both and exporting them (or as @Jeremboo mentioned, not select anything). Of course select the Geometry you need in the exporter.

He doesn’t explain what he did to fix it, or I am not understanding it. If I select just the mesh and not the armature then the object is exported without bones…

My problem was exporting a spline from Blender to JSON. This gave the same error because, well, a spline is not a mesh. Some python magic did the trick. I’m not a developer myself so I cant explain how kit was done. But with a little bit of Python knowledge, this shouldn’t be to hard.

Python magic? What is he talking about…

This git issue thread didn’t make any sense for me. Maybe someone can explain it but I don’t see the solution there.

Thank you so much everyone in advance! :slight_smile:

4

Sounds very much like somebody else solved the problem for him :grin:

I’d say try exporting in a different format such as FBX, I’ve found the blender exporter to be buggy before.

5

Thanks so much for your help @looeee, but that still doesn’t resolve the issue. :confused:

6

Before you export the model in Blender make sure only the mesh object is selected, not the armature. And check the bones option to export the bones, I believe that should work.

7

Hi @CasualKyle, thanks so much for the reply.
I really hope you can help me end this nightmare!

Good news: I managed to export the model now and load it in a skinned mesh.
However:

  1. Textures and materials are not loading properly
  2. I get only one mesh, when on the scene I have two meshes sharing a single armature (and yes, I did select both meshes with the mouse… but still I get only one mesh exported at time).

This is my blender file:

If you can teach me how to export this correctly, I would be incredibly grateful.
This is my attempt 17 of just the last three hours. I have made over a hundreds of attempts with different configurations over the last three weeks without success…

This is what I get:

PLEASE help me.
Thanks
(I know it sounds desperate… I am :confused: )

P.S: These are the texture images:

8

Hi @rodrix — It might be worth trying the glTF blender exporter. I tested that out, and it is at least loading a THREE.SkinnedMesh with THREE.GLTF2Loader.

The materials did not come through on export quite right, but I think that could probably be fixed by looking through the docs and/or github issues on the exporter (or manually adding materials in JS if necessary…).

1 Like
9

Hi @donmccurdy. Thanks so much for the reply.
Did you test it out with the model I provided and got better results than I did?

Thanks in advance

10

it looks consistent with your Blender model to me ¯_(ツ)_/¯

I exported with a Phong shader: https://expirebox.com/download/e276add89345fcd5fa4888e214ea66ba.html

But you will need this fix to GLTF2Loader: https://github.com/mrdoob/three.js/pull/11524