Skeletal Animation Distortion Issue

The distortion you're experiencing with your animated character (particularly in the fingers and right foot) is a common issue when working with skeletal animations in Three.js. Based on your description, there are several potential causes:

Possible Issues

1. Bone Influence Weights: The distortion might be caused by improper weight painting in Blender. Some vertices might be influenced by multiple bones with incorrect weights.

2. Animation Interpolation: The default linear interpolation between keyframes might be causing unnatural movement, especially for rotational animations.

3. Quaternion vs. Euler Rotations: Three.js uses quaternions for bone rotations, while you might have used Euler rotations in Blender.

4. Bone Hierarchy Issues: The parent-child relationships between bones might not be preserved correctly during export/import.

Potential Solutions

1. Use SkeletonUtils for proper cloning

If you're cloning the model elsewhere in your code, make sure to use SkeletonUtils:

JAVASCRIPTCopied
import { clone } from 'three/examples/jsm/utils/SkeletonUtils.js';

// Use this instead of object.clone()
const clonedModel = clone(object);

2. Adjust the animation settings

Try modifying the animation playback settings:

JAVASCRIPTCopied
const action = mixer.clipAction(gltf.animations[0]);
action.setLoop(THREE.LoopRepeat);
action.clampWhenFinished = true;
action.setEffectiveTimeScale(1.0);
action.setEffectiveWeight(1.0);
action.setDuration(1).play();

3. Check for animation blending issues

If you have multiple animations, ensure they're not conflicting:

JAVASCRIPTCopied
// Make sure to update the mixer in your animation loop
function animate() {
    requestAnimationFrame(animate);
    
    const delta = clock.getDelta();
    if (mixer) mixer.update(delta);
    
    renderer.render(scene, camera);
}

4. Examine the model in the Three.js editor

Load your model into the Three.js editor to inspect the skeleton and animation to identify potential issues.

5. Export settings in Blender

Check your Blender export settings:

• Ensure you're exporting with the correct scale
• Make sure "Export Animations" is checked
• Try different settings for "Always Sample Animations" or "Simplify Animations"

If the issue persists, you might need to revisit your weight painting in Blender or consider using the CCDIKSolver from Three.js to have more control over the IK chain.