Blender to Mixamo to Threejs

Questions
,
1

Hello friends. i have a hard question))
I make model in Blender (fbx), then i load this model to mixamo.com and did the animation. Then i save this file on PC (fbx). In my project i load model:

var loader = new THREE.FBXLoader();
loader.load( 'models/new/robot.fbx', addObj)
function addObj(object) {
  object.mixer = new THREE.AnimationMixer( object );
  mixers.push( object.mixer );
  playerRun = object.mixer.clipAction( object.animations[ 0 ] );
  playerRun.play();
  scene.add( object );
}
function anim() {
 var deltaAnim = clockAnim.getDelta();
 if ( mixers.length > 0 ) {
  for ( var i = 0; i < mixers.length; i ++ ) {
    mixers[ i ].update( deltaAnim );
  }
 }
}

Its OK, but this only one animation in 1 object. How to make many animations in one object.

For example this my object width one animation
image

This object i find in WEB and in this many animations
image

2

This object i find in WEB and in this many animation

What object? Was it an FBX file?

In general FBX files only store a single animation. Some programs such as MotionBuilder can export FBX files with multiple animations but Mixamo cannot. As far as I know blender cannot either.

1 Like
3

Yes, this is spider.fbx width many animations
https://free3d.com/3d-model/spider-animated-low-poly-and-game-ready-87147.html

which file to use to make multiple animations? such as moving forward, backward, etс…

4

You can’t do this easily with FBX. You have a couple of options though, which have already been discussed here:

1 Like
5

It’s also possible to take multiple FBX files from Mixamo…

  • mesh.fbx
  • animation1.fbx
  • animation2.fbx
  • …

… then import them into Blender, apply the animations all to the same mesh, and export as a single glTF file. I’ve described that workflow further here: https://www.donmccurdy.com/2017/11/06/creating-animated-gltf-characters-with-mixamo-and-blender/

4 Likes
6

Thank you very much!

7

I do this! i received two files: gltf and bin. And i see animations in gltf-viewer.
But how play this animations in threejs?

8

See docs for the animation system and THREE.AnimationAction. You’ll probably write something like this:

var model = gltf.scene;
var mixer = new THREE.AnimationMixer( model );
var action = mixer.clipAction( gltf.animations[0] );

// Play one animation
action.play();

// Play all animations
gltf.animations.forEach( function ( clip ) {
	mixer.clipAction( clip ).play();
} );
1 Like
9

Yes, it was difficult for me, but I do this! Thanks a lot :+1: