Three.js Import Blender scene including animations

2
votes

I have a Blender scene containing a bunch of objects. Some of these objects have a bone animation but most don't. I am trying to import the scene into Three.js including the animations on the correct objects. Here is a breakdown of the problem that I am experiencing:

  • Bone animation in Three.js only work when using THREE.SkinnedMesh.
  • Because of the animation data being on all objects, it's hard (if not impossible) to determine what object the animation is linked to, thus making it impossible to load those meshes as THREE.SkinnedMesh instead.
  • Even if it was possible to determine the object the animation belongs to, THREE.SceneLoader won't make these into skinnedmeshes itself, resulting in having to delete those objects the SceneLoader made and creating them again manually with a skinned mesh.

I've tried to do this by manually exporting the animated meshes seperately from Blender so the bone animation data is only on those objects, but this raises a problem with the positioning of these objects since the position and rotation of the animated objects is only available in the scene.js exported file from Blender.

  • Is there any possible way to export animated objects in Blender as SkinnedMeshes right away, while keeping the rest of the scene intact?
  • Would it be possible to determine whether an object has an animation or not in Three.js?

Update

I realized that since I get the objects with an animation separately anyway, I could loop over the scene geometry to check whether or not there is an animation available on the object, and create a SkinnedMesh for it if that's the case. The positioning problem still exists though: The (0,0,0) position and rotation in Three.js positions the object not at the center of the scene, but rather around some other point. I'm not sure what point this is, it could be the Blender scene center but I thought those two would be the same.

1
animationthree.jsblender

1 Answers

0
votes

I got a test object that was created and animated in the center of the scene in blender. When importing this into Three.js the position seems to shift a bit (somewhere between -1.5 and 1.5 units on every axis for me), but that can be fixed manually in Three. This approach works well enough, but with a few downsides:

  • The positions shift that might force you to manually re-position the animated object. This would only be in cases where your positioning needs needs to be precise.
  • You need to manually get the position,rotation and scale from blender by placing the object where you want it. (You could do that in Three, but I figured that would be even more work.

It's not perfect, but it works for now. I am sure it's possible to get the Blender to Three exporter to export the object with animation as if it was in the center of the scene and then supply the correct position,rotation and scale to Three.js to be able to instantly load the animated objects on the right position, and if I had the time I would try and implement it.

I hope this helps out anyone else having this problem, even though this is just a temp fix.