Is there any way to import animation and model saperately?

Questions
1

I want to load a glb model and it’s animation separately. Is it possible to export animation separately from maya and use it in threeJS? If yes how can I get it?

2

See this example.

  1. If you mean exporting armature animations - that should be easy enough as long as you export skinning weights along with the model. (Whether or not it is possible in Maya, not sure. In Blender you can simply select the armature and model separately and export using “Selection Only” option in the glTF 2.0 Exporter. Then you can bind it to the model in three like in the example above.)
  2. If you mean keyframe animations of entire scenes, your best bet may be to animate a simple 1x1x1 cube, import the animation to three.js, and after it’s loaded - replace cube with your model.
1 Like
3

I think my question is not clear… I want to load animation in different .glb file which will contain only animation and rig data… and mesh will be separate .glb. After loading both the files how can I link animation from animation.glb to the mesh in mesh.glb file?

4

In this example https://sbcode.net/threejs/gltf-animation/
I load the glb model separately from the animations
The main model comes from mixamo. The model and animations were all exported individually using fbx, and then converted into glb using blender.
You can view the JS source using the <> button on the working example.

5

Thanks for reply @seanwasere… Animation is working fine… but I’m getting model scale issue once I play animation… I’m exporting animation and mesh from blender… Do you have any idea?

6

Models can be in all kinds of scales. Depends on who created it, and which program and which default units the program uses etc.
You can either scale before you export from blender (if you used blender), or scale in threejs using https://threejs.org/docs/#api/en/core/Object3D.scale
But, your problem could be interpreted many different ways, so can you create an example that reproduces your problem. And outline your steps you used to create the model and animations.
Whatever problem you have, I don’t have it myself, so I can only guess how to fix it. And you can see in my example, I don’t have the problem.

In my example, changing the scale of the gltf.scene scales both the model and animations 50%

gltfLoader.load(
    'models/vanguard.glb',
    (gltf) => {
        gltf.scene.scale.set(.5, .5, .5)
        mixer = new THREE.AnimationMixer(gltf.scene);
        ....

It works for me.
If it doesn’t work for you, then provide a code example. Maybe your problem is something else and unrelated.

7

As I have seen below code in your example…

(gltf as any).animations[0].tracks.shift() //delete the specific track that moves the object forward while running

I have implemented the same… then it was coming inside the window but it got rotate. Is it necessary to remove first track only? how to identify which track is taking forward to the model when animation is running?

You are removing track from one animation only instead of all three… can you please explain it bit more why that track is taking model forward?

8

my code is not the same as your code. But it shows you that it is possible to load models and animations separately. The original question has been answered.
Sorry if I broke your code. Please provide an example of your code.
If you don’t understand the comment in my code example that you copy/pasted, then you need to watch the videos on the link.