Using AnimationObjectGroup for Separate Animation GLB Files

Your approach has some issues that could lead to problems with real-world content. Based on the documentation for AnimationObjectGroup, there are a few important considerations:

Issues with Current Approach

1. Misuse of AnimationObjectGroup: The AnimationObjectGroup is designed for objects that share the same animation state, but you're trying to apply animations from one model to another.

2. Skeleton Compatibility: For animations to work correctly, the skeleton structure in your animation GLB must match the skeleton in your body model.

3. Unnecessary Cloning: You're cloning the animation model but not actually using it visibly in the scene.

Recommended Approach

A better approach would be to directly apply the animations from the animation GLB to your body model:

JAVASCRIPTCopied
gltfLoader.load('body.glb', function (body_gltf) {
    let body_model = SkeletonUtils.clone(body_gltf.scene);
    scene.add(body_model);

    gltfLoader.load('animation.glb', function (animation_gltf) {
        // Create mixer directly with the body model
        animationMixer = new THREE.AnimationMixer(body_model);
        
        // Apply the animation from the animation GLB
        if (animation_gltf.animations && animation_gltf.animations.length > 0) {
            animationMixer.clipAction(animation_gltf.animations[0]).play();
        }
    });
});

Important Considerations

1. Skeleton Compatibility: Ensure that the skeleton structure (bone names, hierarchy) in your animation file matches the body model.

2. Property Limitations: As per the documentation, "The animated properties must be compatible among all objects in the group" and "A single property can either be controlled through a target group or directly, but not both."

3. Animation Retargeting: If the skeletons don't match exactly, you might need to implement animation retargeting, which is more complex than this simple approach.

4. Update Loop: Don't forget to update your animation mixer in your render loop:

JAVASCRIPTCopied
function animate() {
    requestAnimationFrame(animate);
    
    const delta = clock.getDelta();
    if (animationMixer) animationMixer.update(delta);
    
    renderer.render(scene, camera);
}

This approach should be more reliable for applying animations from a separate file to your body model.