Cloning GLTF Objects in Three.js

When working with GLTF models in Three.js, you need to handle both the scene (3D model) and animations separately when creating multiple instances. The structuredClone() method doesn't work because GLTF objects contain non-serializable components like WebGL buffers and Three.js objects.

Here's the proper way to create multiple instances of a GLTF model:

Solution

JAVASCRIPTCopied
const CHARACTER_PATH = "/models/character.glb";

// Promisified version of GLTFLoader.load()
function loadGLTF(url) {
  return new Promise((resolve, reject) => {
    new GLTFLoader().load(
      url,
      (gltf) => resolve(gltf),
      undefined,
      (error) => reject(error)
    );
  });
}

// Load the model once
loadGLTF(CHARACTER_PATH)
  .then((gltf) => {
    // Store the original loaded model
    const originalModel = gltf;
    
    // Create first instance
    const instance1 = createModelInstance(originalModel);
    instance1.scene.position.x = -2;
    scene.add(instance1.scene);
    
    // Create second instance
    const instance2 = createModelInstance(originalModel);
    instance2.scene.position.x = 2;
    scene.add(instance2.scene);
    
    // Create more instances as needed...
  })
  .catch((error) => {
    console.log(error);
  });

// Function to create a new instance from the original model
function createModelInstance(originalGltf) {
  // Clone the scene
  const clonedScene = originalGltf.scene.clone();
  
  // Create a new object to hold both scene and animations
  const instance = {
    scene: clonedScene,
    animations: originalGltf.animations, // Animations can be shared
    // You can add other properties you need from the original GLTF
  };
  
  // If you need to use AnimationMixer, create a unique one for each instance
  instance.mixer = new THREE.AnimationMixer(instance.scene);
  
  // Create animation clips for this instance
  instance.actions = {};
  originalGltf.animations.forEach((animation) => {
    const action = instance.mixer.clipAction(animation);
    instance.actions[animation.name] = action;
  });
  
  return instance;
}

// In your animation loop, update each mixer
function animate() {
  requestAnimationFrame(animate);
  
  const delta = clock.getDelta();
  
  // Update all mixers
  if (instance1 && instance1.mixer) instance1.mixer.update(delta);
  if (instance2 && instance2.mixer) instance2.mixer.update(delta);
  
  renderer.render(scene, camera);
}

Key Points

1. Scene Cloning: Use originalGltf.scene.clone() to create a new instance of the 3D model.

2. Animation Sharing: The animation data itself can be shared between instances - you don't need to clone it.

3. Unique Animation Mixers: Each instance needs its own AnimationMixer to play animations independently.

4. Memory Efficiency: This approach is memory-efficient because the geometry and texture data are shared between instances, while only the transformations (position, rotation, scale) are unique to each instance.

5. Independent Control: Each instance can be positioned, animated, and modified independently.

This pattern allows you to create multiple instances of your character while loading the model only once, saving bandwidth and improving performance.