Applying different character to fbx file

First, am a total newbie to the animation but good at the web (javascript and others).

I have running project which am looking to restructure in a three.js way. The right now structure is like:

1- Record animation on rokoko (fbx, but we could change this)
2- Change the character on an application x
3- Present the animation on an application y

What im looking for is to structure the whole story from rokoko to a webpage using three.js

All i need is a support with:

  • terminologies to use when search for this approach (what the character called? Model or object?)
  • if my wants is doable and what is the needs then?

Thanks in advance!

This question is a little vague …
and i’m not a 100% sure if im understanding you correctly but if rokoko supports the exportation of fbx files and animations then yes you can import it to three.js using the fbx loader then to chane either the x or y use model.position.x = 100; …

I don’t know about Rokoko but, for the rest, yes, you can use different animations over different models as long as they share the same skeleton (or, at least, bones with the same names)

You can read here about the Animation System

You are right, i do struggle with needed terminologies.
I have imported the fbx into three.js successfully. The object (Skeleton bones) is moving nicely! my need here to put a character on this skeleton and to do this on three.js. In another word, i’m looking to do the join (skeleton and a character) within three.js.

Then, i need to consider the current fbx (the Skeleton one) when getting its character/s? when i have my fbx (the Skeleton one) and a desired character, i can merge them within three.js?


You play an animation on an AnimationMixer created for a model, it doesn’t matter if the animation comes from that model or not. The Skeleton is the way to join both sides, the model and the animation. What I read is that their bones need to have the same names, but I’m not 100% sure if that’s enough:

let mixer = new THREE.AnimationMixer(model);
let animationAction = mixer.clipAction(clip);;

see my answer here if you want to attach a model to bones etc etc

Quite clear (Thanks for you both!) and its done :slight_smile: