Troubleshooting Animation Playback with FBXLoader

Based on your code, I can see a few potential issues that might be preventing your animation from playing:

Main Issues

1. Missing Animation Update: You're creating the mixer and playing the action, but you're not updating the mixer in your animation loop.

2. Animation Clip Selection: The way you're finding the animation clip might not be correct.

3. Potential Type Issues: The animClip1: any casting might be hiding type-related problems.

Solutions

1. Update the AnimationMixer in your animation loop

The most critical issue is that you need to update the mixer in your animation loop with the elapsed time:

TYPESCRIPTCopied
// Store the mixer as a class property or in a scope accessible by your animation loop
this.mixer = new THREE.AnimationMixer(animClip1);

// In your animation loop (requestAnimationFrame callback)
function animate(time) {
  // Calculate delta time
  const delta = clock.getDelta(); // You need to create a THREE.Clock instance
  
  // Update the mixer with the delta time
  if (this.mixer) {
    this.mixer.update(delta);
  }
  
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

2. Verify the animation clip name

Mixamo animations might not always have "mixamo.com" as the exact clip name. Try logging the available animations:

TYPESCRIPTCopied
console.log("Available animations:", animClip1.animations);

// Then try to get the first animation if there's only one
const clip = animClip1.animations[0];
// Or find by name if you know the exact name
// const clip = THREE.AnimationClip.findByName(animClip1.animations, "exact_name");

3. Complete revised code

Here's a revised version of your code:

TYPESCRIPTCopied
// Create a clock for animation timing
const clock = new THREE.Clock();
let mixer;

// ANIMATIONS TEST
const loader = new FBXLoader();
loader.load(
  "./assets/3d/animations/Remy.fbx",
  (anim) => {
    console.log("anim loaded", anim);
    
    this.sceneStore.threeScene.add(anim);
    anim.children.forEach((child) => {
      child.scale.set(0.01, 0.01, 0.01);
      child.position.set(0.01, 0.01, 0.01);
      child.layers.enableAll();
    });
    anim.layers.enableAll();
    anim.name = "anim clip";
    
    // Log available animations
    console.log("Available animations:", anim.animations);
    
    // Create mixer
    mixer = new THREE.AnimationMixer(anim);
    
    // Get the first animation if available
    if (anim.animations && anim.animations.length > 0) {
      const clip = anim.animations[0];
      const action = mixer.clipAction(clip);
      action.play();
    } else {
      console.error("No animations found in the loaded model");
    }
  },
  (xhr) => {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  (error) => {
    console.log(error);
  }
);

// Animation loop
function animate() {
  requestAnimationFrame(animate);
  
  // Update mixer
  if (mixer) {
    const delta = clock.getDelta();
    mixer.update(delta);
  }
  
  // Render scene
  renderer.render(scene, camera);
}

// Start animation loop
animate();

This should help get your animation working. The key is making sure you're updating the mixer in your animation loop with the correct delta time.