How to apply animation to model component in three js?

To apply animation to a component within a GLB (GLTF) model in Three.js, you first need to extract the animation data from the model.

Here’s an example of how to extract and apply animations to a component within a GLB model in Three.js:

Load the GLB model and extract the animations:

const loader = new THREE.GLTFLoader();
loader.load("model.glb", function(gltf) {
  const model = gltf.scene;
  scene.add(model);

  const animations = gltf.animations;
  if (animations && animations.length) {
    const mixer = new THREE.AnimationMixer(model);
    mixer.clipAction(animations[0]).play();
  }
});

In this example, we extract the animations from the GLB model using gltf.animations. The AnimationMixer class is then used to play the first animation in the list.

Apply the animation to the desired component:

const component = model.children[0];
const mixer = new THREE.AnimationMixer(component);
const animation = mixer.clipAction(animations[0]);
animation.play();

In this example, we access the desired component within the model using model.children[0]. The AnimationMixer class is then used to play the first animation in the list on the component.

This is just a basic example of how to apply animations to a component within a GLB model in Three.js. You can also manipulate the animation playback (e.g., pausing, rewinding, etc.) and control the speed and direction of the animation using the AnimationMixer class.