Apply fbx animation to gltf model

Questions
, ,
1

Question

Hello guys.

I have GLTF model and FBX animation from Mixamo.

I want to load glb model and dynamically add fbx animations to it.

I was able to apply animation to the model,
but the model is drawn parallel to the Z axis direction.
How can we modify the model’s body position to keep it parallel to the Y-axis,
as it was before the animation was loaded?

Although changing the model’s rotate can control the body posture for the first drawing,
switching between multiple animations will cause the model’s rotate to revert back to its original state,
necessitating another method.

image
image1796×1030 64.2 KB

reference

// SCENE
const scene = new THREE.Scene();

// HELPER
const gridHelper = new THREE.GridHelper(50, 10);
scene.add(gridHelper);

const axesHelper = new THREE.AxesHelper(180);
scene.add(axesHelper);

// CAMERA
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.y = 5;
camera.position.z = 5;
camera.position.x = 0;

// RENDERER
let renderer: THREE.WebGLRenderer;

// CONTROLS
let orbitControls: OrbitControls;

// LIGHTS
light();

// MODEL WITH ANIMATIONS
let targetAnimation: THREE.AnimationAction;
let mixer: THREE.AnimationMixer;

// FIXME: Applying fbx animation to a gltf model causes the stance to be horizontal
function gltfWithFbxAnimation(){
    new GLTFLoader().load(soldierModel, async function (gltf) {
        new FBXLoader().load(fbxModel, async function (fbx: THREE.Group) {
            const model = gltf.scene;
            scene.add(gltf.scene);

            mixer = new THREE.AnimationMixer(model);
            targetAnimation = mixer.clipAction(fbx.animations[1]);
            targetAnimation.play();

        });
    });
}
gltfWithFbxAnimation();

// ANIMATE
const clock = new THREE.Clock();
const animate = () => {
  const mixerUpdateDelta = clock.getDelta();
  mixer?.update(mixerUpdateDelta);
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
};

thank you

2

What will happen if you put the model in a group and rotate the group? The animation will still be bound to the model, but its rotation will not collide with the rotation of the group.

3

What we want to do is to move the model in time with Mixamo’s animation, as shown in the sample video below.

Adding the animation to a group will indeed make the model vertical, but it will also change the x, y, and z axes.

I was thinking that this could be solved by adjusting the Quaternion of each Bone when animating the model.
However, I have not yet found a solution to this problem.

4

The original request was about how to rotate the model without interfering with its animations.

As for how to move the model while it is walking/running, you have to manually change the position of the model depending on the orientation of model and your coordinate system.

You may check the source code of the animation in the video. It also changes the position manually, like this (lines 97-100):

const moveX = this.walkDirection.x * velocity * delta
const moveZ = this.walkDirection.z * velocity * delta
this.model.position.x += moveX
this.model.position.z += moveZ
5

Thanks for the reply.
You are right, my first question was only about the rotation of the model as you said.

I will try it based on the advice you gave me.

Thanks.

1 Like