Adding animation from blender to my already import model

Hello hope everyone is having a nice day

Started using three.js recently and I managed to add a model from blender using the gltf format. I was wondering how would I add the animation I made in blender to my three.js site. Also first time posting here so tell me if i’m doing anything thats not cool on this post

_LoadModel() {

  const loader = new GLTFLoader();

  loader.load('./resources/NewIdea3.glb',  (gltf) => {

      gltf.scene.traverse(c => {

          c.castShadow = true;

          c.frustumCulled = false;

      })

      this._scene.add(gltf.scene);

  });

  // gltf.position.copy(100,0,0);

}

If the animation is part of your glb file, you can select it in the onLoad() callback like so:

const animation =  gltf.animations[ 0 ];

mixer = new THREE.AnimationMixer( gltf.scene );

const action = mixer.clipAction( animation );
action.play();

The animation mixer is updated in your animation loop like so:

const delta = clock.getDelta();

if ( mixer !== undefined ) mixer.update( delta );
1 Like

Wait sorry to bother you but how would I do that I am still pretty new to programming names and terms.

I suggest you study how this example works:

https://threejs.org/examples/webgl_morphtargets_horse

1 Like

Thank you So much been a big help