According to the documentation it is possible to create attachments at runtime and add them to a skeleton/skin: https://en.esotericsoftware.com/spine-runtime-skins#Creating-attachments

However I cannot find comprehensive API doc or examples on how to do this using the ThreeJS runtime.

I was able to make some progress, and can add an attachment to an existing SkeletonMesh via an image path, but only the geometry appears as a blank white box with the correct dimensions. I have been unable to get the actual image to render properly. Any guidance is appreciated.

/**
 * Set a slot's attachment on a SpineMesh, supporting runtime-loaded images
 * @param skeletonMesh - The Spine mesh to modify
 * @param slotName - Name of the slot (e.g., "Mainhand", "Offhand")
 * @param attachmentName - Name of the attachment to show, or null to clear
 * @param imagePath - Optional path to external PNG if not in atlas
 */
export async function setSlotAttachment(
  skeletonMesh: spine.SkeletonMesh, 
  slotName: string, 
  attachmentName: string | null,
  imagePath?: string,

): Promise<void> {
  const skeleton = skeletonMesh.skeleton;
  const slot = skeleton.findSlot(slotName);
  
  if (!slot) {
    console.warn(`Slot "${slotName}" not found on skeleton`);
    return;
  }

  if (attachmentName === null) {
    // Clear the slot
    slot.setAttachment(null);
    return;
  }

  let attachment: spine.Attachment | null = null;

  // If an external image path is provided, create a runtime attachment
  if (imagePath) {
    attachment = await createRuntimeAttachment(skeletonMesh, attachmentName, imagePath);
    
    if (!attachment) {
      console.error('Failed to create runtime attachment');
      return;
    }
    
    console.log('Runtime attachment created successfully:', attachment);
    
    // Add the attachment to the current skin (or create one if needed)
    if (!skeleton.skin) {
      const newSkin = new spine.Skin('custom');
      skeleton.setSkin(newSkin);
    }
    
    skeleton.skin!.setAttachment(slot.data.index, attachmentName, attachment);

  } else {
    // Search through existing skins for the attachment
    const skeletonData = skeleton.data;
    const skins = skeletonData.skins;
    
    let foundSkin: spine.Skin | null = null;
    
    for (let i = 0; i < skins.length; i++) {
      const skin = skins[i];
      attachment = skin.getAttachment(slot.data.index, attachmentName);
      if (attachment) {
       
        foundSkin = skin;
        break;
      }
    }
    
    if (!attachment || !foundSkin) {
      console.warn(`Attachment "${attachmentName}" not found for slot "${slotName}" in any skin`);
      return;
    }

    // Merge the found skin into current skin if needed
    if (!skeleton.skin) {
      skeleton.setSkin(foundSkin);
      skeleton.setSlotsToSetupPose();
    } else if (skeleton.skin !== foundSkin) {
      skeleton.skin.setAttachment(slot.data.index, attachmentName, attachment);
    }
  }


  
  slot.setAttachment(attachment);
  skeleton.updateCache();
  
}


/**
 * Create a runtime attachment from an external image file
 */
export async function createRuntimeAttachment(
  skeletonMesh: spine.SkeletonMesh,
  attachmentName: string,
  imagePath: string,
): Promise<spine.RegionAttachment | null> {
  
  // Load the texture using THREE.js
  const textureLoader = new THREE.TextureLoader();
  
  return new Promise((resolve, reject) => {
    textureLoader.load(
      imagePath,
      (texture) => {

        // Ensure texture settings are correct for Spine
        texture.flipY = false; // Spine uses top-left origin
        texture.premultiplyAlpha = false;
        texture.needsUpdate = true;
        
        // Create a new texture atlas page for this texture
        const page = new spine.TextureAtlasPage(attachmentName);
        page.texture = texture as any;
        page.width = texture.image.width;
        page.height = texture.image.height;
        

        // Create a texture region that covers the entire image
        const region = new spine.TextureAtlasRegion(page, attachmentName);
        region.u = 0;
        region.v = 0;
        region.u2 = 1;
        region.v2 = 1;
        region.x = 0;
        region.y = 0;
        region.width = texture.image.width;
        region.height = texture.image.height;
        region.originalWidth = texture.image.width;
        region.originalHeight = texture.image.height;
        region.page = page;
        region.texture = texture as any;
        

        // Create the region attachment
        const attachment = new spine.RegionAttachment(attachmentName, attachmentName);
        

        //Set width and height BEFORE setting region
        attachment.width = texture.image.width;
        attachment.height = texture.image.height;

        // Now set the region
        attachment.region = region;

        // Update the attachment's region (this computes UVs and offsets)
        attachment.updateRegion();
     
        
        resolve(attachment);
      },
      undefined,
      (error) => {
        console.error(`Failed to load texture ${imagePath}:`, error);
        reject(error);
      }
    );
  });
}