Implementing a Virtual Fitting Room with Three.js

To create a virtual fitting room where you can dynamically change clothes on a 3D human model, you'll need to work with the GLTFLoader in Three.js to load and combine your base model with various clothing items.

Loading Your Models

First, you'll need to load your base human model and clothing items:

JAVASCRIPTCopied
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const loader = new GLTFLoader();

// Load base human model
let humanModel;
loader.load('path/to/human-model.gltf', (gltf) => {
    humanModel = gltf.scene;
    scene.add(humanModel);
    
    // Once the human is loaded, you can load initial clothing
    loadClothing('path/to/initial-clothing.gltf');
});

// Function to load clothing items
function loadClothing(path) {
    loader.load(path, (gltf) => {
        const clothingModel = gltf.scene;
        
        // Add the clothing to the scene
        scene.add(clothingModel);
        
        // If you need to position the clothing to match the human model
        // clothingModel.position.copy(humanModel.position);
    });
}

Handling Clothing Changes

To allow users to switch between different clothing items:

JAVASCRIPTCopied
// Store references to loaded clothing items
const clothingItems = {
    shirts: {},
    pants: {},
    shoes: {}
};

// Load all clothing options in advance
function preloadClothing() {
    // Load shirts
    loader.load('path/to/shirt1.gltf', (gltf) => {
        clothingItems.shirts.shirt1 = gltf.scene;
        // Hide initially
        clothingItems.shirts.shirt1.visible = false;
        scene.add(clothingItems.shirts.shirt1);
    });
    
    // Load more clothing items similarly...
}

// Function to change clothing
function changeClothing(category, itemName) {
    // Hide all items in the category
    Object.values(clothingItems[category]).forEach(item => {
        item.visible = false;
    });
    
    // Show the selected item
    clothingItems[category][itemName].visible = true;
}

// Example usage in UI
document.getElementById('shirt-selector').addEventListener('change', (e) => {
    changeClothing('shirts', e.target.value);
});

Skinning and Bone Attachment

For the clothing to properly follow the human model's movements, you'll need to ensure they share the same skeleton structure:

JAVASCRIPTCopied
function attachClothingToSkeleton(humanModel, clothingModel) {
    // Find the skeleton/armature in the human model
    let humanSkeleton;
    humanModel.traverse((node) => {
        if (node.isSkinnedMesh || node.isBone) {
            humanSkeleton = node.skeleton || node;
        }
    });
    
    // Apply the human skeleton to the clothing meshes
    clothingModel.traverse((node) => {
        if (node.isSkinnedMesh) {
            node.skeleton = humanSkeleton;
            // You might need to adjust bind matrices depending on your models
        }
    });
}

Animation Handling

If your human model includes animations, you'll need to ensure the clothing follows along:

JAVASCRIPTCopied
import { AnimationMixer } from 'three';

let mixer;
let animations = [];

function setupAnimations(model) {
    mixer = new THREE.AnimationMixer(model);
    
    // If animations are included in your GLTF
    model.animations.forEach((clip) => {
        const action = mixer.clipAction(clip);
        animations.push(action);
        // Auto-play the first animation
        if (animations.length === 1) {
            action.play();
        }
    });
}

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

This approach should help you create a virtual fitting room similar to the examples you referenced. You may need to adjust the code based on your specific model structure and requirements.