Cloning Animated GLB Models with SkeletonUtils

Looking at your code and the issue you're facing, I can see that you're trying to clone an animated GLB model but having difficulties. The key issue is that for animated models with skeletons, you need to use SkeletonUtils.clone() rather than the standard Object3D.clone() method.

Correct Implementation

Here's how to properly clone your animated model using SkeletonUtils:

1. First, make sure you've imported SkeletonUtils correctly:

JAVASCRIPTCopied
import * as SkeletonUtils from 'three/addons/utils/SkeletonUtils.js';

2. When loading your model, use SkeletonUtils.clone() for creating copies:

JAVASCRIPTCopied
let mixer; // Animation mixer for the original
let mixers = []; // Array to store mixers for clones

// Load the model
loader.load('path/to/model.glb', function(gltf) {
    // Original model
    model = gltf.scene;
    model.scale.set(1, 1, 1);
    scene.add(model);
    
    // Set up animation for original
    mixer = new THREE.AnimationMixer(model);
    const action = mixer.clipAction(gltf.animations[0]);
    action.play();
    
    // Clone multiple instances
    for (let i = 0; i < 10; i++) {
        // Use SkeletonUtils.clone instead of model.clone()
        let clonedBird = SkeletonUtils.clone(model);
        
        // Position the clone
        clonedBird.position.set(0, randnum(0, 10), 0);
        clonedBird.scale.set(1, 1, 1);
        
        // Set up animation for the clone
        const cloneMixer = new THREE.AnimationMixer(clonedBird);
        const cloneAction = cloneMixer.clipAction(gltf.animations[0]);
        cloneAction.play();
        
        // Store the mixer for animation updates
        mixers.push(cloneMixer);
        
        // Add to scene
        scene.add(clonedBird);
    }
});

3. Update all mixers in your animation loop:

JAVASCRIPTCopied
function animate() {
    requestAnimationFrame(animate);
    
    const delta = clock.getDelta();
    
    // Update original model animation
    if (mixer) mixer.update(delta);
    
    // Update all clone animations
    for (let i = 0; i < mixers.length; i++) {
        mixers[i].update(delta);
    }
    
    renderer.render(scene, camera);
}

Key Points to Remember

1. SkeletonUtils.clone() properly clones the skeletal structure, ensuring that any SkinnedMesh instances are correctly associated with their bones.

2. Each cloned model needs its own AnimationMixer instance to play animations independently.

3. You need to update all mixers in your animation loop.

4. Make sure the animations from the original model are being referenced for each clone.

This approach should help you successfully clone animated GLB models with their skeletal animations intact.