my-3d-project/
├── models/
│   └── your-tripo-model.glb
└── (empty for now)

Create a complete web application that displays a GLB 3D model located at './models/your-tripo-model.glb'. 

Requirements:
1. Set up both Babylon.js and Three.js examples in separate HTML files
2. Include all necessary dependencies via CDN
3. Add proper lighting, camera controls, and responsive canvas
4. Implement orbit controls for user interaction
5. Add loading progress indicators
6. Create an index.html with links to both examples
7. Include error handling for failed model loads
8. Add comments explaining each section
9. Make it work with 'python -m http.server' for local testing

The model should be centered, properly lit, and rotatable with mouse controls.

python -m http.server 8000
# Ou si vous préférez Node.js :
npx http-server

_// Exemple Three.js - Chargeur de modèle GLB_
_// Cet exemple montre comment charger et afficher un modèle GLB à l'aide de Three.js_

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

class ThreeExample {
    constructor() {
        this.container = document.getElementById('three-container');
        this.scene = new THREE.Scene();
        this.camera = new THREE.PerspectiveCamera(
            75, 
            window.innerWidth / window.innerHeight, 
            0.1, 
            1000
        );
        
        this.renderer = new THREE.WebGLRenderer({ antialias: true });
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.setClearColor(0x000000);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        
        this.container.appendChild(this.renderer.domElement);
        
        this.init();
    }

    **init**() {
        _// Configuration de la caméra_
        this.camera.position.set(5, 5, 5);
        this.camera.lookAt(0, 0, 0);

        _// Configuration de l'éclairage_
        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
        this.scene.add(ambientLight);

        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(10, 10, 5);
        directionalLight.castShadow = true;
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        this.scene.add(directionalLight);

        _// Ajout des OrbitControls_
        this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;
        this.controls.screenSpacePanning = false;
        this.controls.minDistance = 1;
        this.controls.maxDistance = 50;

        _// Chargement du modèle GLB_
        this.loadModel();

        _// Gestion du redimensionnement de la fenêtre_
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        });

        _// Démarrage de la boucle d'animation_
        this.animate();
    }

    **loadModel**() {
        const loader = new GLTFLoader();
        
        console.log('Chargement du modèle GLB...');
        loader.load(
            'models/your-model1.glb',
            (_gltf_) => {
                console.log('Modèle chargé avec succès :', _gltf_);
                
                _// Ajout du modèle à la scène_
                this.scene.add(_gltf_.scene);
                
                _// Centrage du modèle_
                this.centerModel(_gltf_.scene);
                
                _// Ajout d'un plan de sol pour référence_
                this.createGround();
                
                _// Activation des ombres pour tous les maillages_
                _gltf_.scene.traverse((_child_) => {
                    if (_child_.isMesh) {
                        _child_.castShadow = true;
                        _child_.receiveShadow = true;
                    }
                });
                
            },
            (_progress_) => {
                console.log('Progression du chargement :', (_progress_.loaded / _progress_.total * 100) + '%');
            },
            (_error_) => {
                console.error('Erreur lors du chargement du modèle :', _error_);
                this.createPlaceholderCube();
            }
        );
    }

    **centerModel**(_model_) {
        _// Calcul de la boîte englobante pour centrer le modèle_
        const box = new THREE.Box3().setFromObject(_model_);
        const center = box.getCenter(new THREE.Vector3());
        const size = box.getSize(new THREE.Vector3());
        
        _// Centrage du modèle_
        _model_.position.sub(center);
        
        _// Redimensionnement du modèle à une taille raisonnable si nécessaire_
        const maxDim = Math.max(size.x, size.y, size.z);
        if (maxDim > 10) {
            const scale = 5 / maxDim;
            _model_.scale.setScalar(scale);
        }
    }

    **createGround**() {
        _// Création d'un plan de sol pour référence_
        const groundGeometry = new THREE.PlaneGeometry(20, 20);
        const groundMaterial = new THREE.MeshLambertMaterial({ 
            color: 0x333333,
            transparent: true,
            opacity: 0.8
        });
        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = -Math.PI / 2;
        ground.position.y = -2;
        ground.receiveShadow = true;
        this.scene.add(ground);
    }

    **createPlaceholderCube**() {
        _// Création d'un cube de substitution si le chargement du modèle échoue_
        const geometry = new THREE.BoxGeometry(2, 2, 2);
        const material = new THREE.MeshLambertMaterial({ color: 0x8080ff });
        const cube = new THREE.Mesh(geometry, material);
        cube.castShadow = true;
        this.scene.add(cube);
    }

    **animate**() {
        requestAnimationFrame(() => this.animate());
        
        _// Mise à jour des contrôles_
        this.controls.update();
        
        _// Rendu de la scène_
        this.renderer.render(this.scene, this.camera);
    }
}

_// Initialisation lorsque le DOM est chargé_
document.addEventListener('DOMContentLoaded', () => {
    new ThreeExample();
});

export default ThreeExample;

mkdir babylon-3d-project
cd babylon-3d-project
npm init -y
npm install --save babylonjs babylonjs-loaders

<!DOCTYPE html><html><head><title>Babylon.js - Tripo AI Model</title><style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style></head><body><canvas id="renderCanvas"></canvas><script src="https://cdn.babylonjs.com/babylon.js"></script><script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script><script src="app.js"></script></body></html>

// app.jsconst canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true, {
    preserveDrawingBuffer: true,
    stencil: true,
    disableWebGL2Support: false
});

const createScene = async () => {
    const scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color4(0.9, 0.9, 0.9, 1);
    
    // Caméra avec un meilleur positionnementconst camera = new BABYLON.ArcRotateCamera(
        "camera",
        BABYLON.Tools.ConvertDegreesToRadians(45),
        BABYLON.Tools.ConvertDegreesToRadians(60),
        10,
        BABYLON.Vector3.Zero(),
        scene
    );
    camera.attachControl(canvas, true);
    camera.wheelPrecision = 50;
    camera.minZ = 0.1;
    
    // Configuration améliorée de l'éclairageconst hemiLight = new BABYLON.HemisphericLight(
        "hemiLight",
        new BABYLON.Vector3(0, 1, 0),
        scene
    );
    hemiLight.intensity = 0.5;
    
    const dirLight = new BABYLON.DirectionalLight(
        "dirLight",
        new BABYLON.Vector3(-1, -2, -1),
        scene
    );
    dirLight.position = new BABYLON.Vector3(20, 40, 20);
    dirLight.intensity = 0.5;
    dirLight.shadowEnabled = true;
    
    // Générateur d'ombresconst shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);
    shadowGenerator.useBlurExponentialShadowMap = true;
    
    // Sol pour les ombresconst ground = BABYLON.MeshBuilder.CreateGround(
        "ground",
        { width: 20, height: 20 },
        scene
    );
    ground.receiveShadows = true;
    
    // Importation des assets 3D générés par IA avec gestion des erreurstry {
        const result = await BABYLON.SceneLoader.ImportMeshAsync(
            "",
            "./models/",
            "your-tripo-model.glb",
            scene
        );
        
        // Traitement des maillages importés
        result.meshes.forEach(mesh => {
            shadowGenerator.addShadowCaster(mesh);
            if (mesh.material) {
                mesh.material.backFaceCulling = false;
            }
        });
        
        // Centrage et redimensionnement du modèleconst rootMesh = result.meshes[0];
        const bounds = rootMesh.getHierarchyBoundingVectors();
        const center = bounds.max.add(bounds.min).scale(0.5);
        rootMesh.position = center.negate();
        
        // Ajustement automatique de la caméra
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.radius = bounds.max.subtract(bounds.min).length() * 1.5;
        
    } catch (error) {
        console.error("Failed to load model:", error);
        // Création d'un indicateur d'erreurconst errorText = new BABYLON.GUI.TextBlock();
        errorText.text = "Échec du chargement du modèle 3D";
        errorText.color = "red";
        errorText.fontSize = 24;
    }
    
    return scene;
};

// Initialisation et exécutioncreateScene().then(scene => {
    engine.runRenderLoop(() => {
        scene.render();
    });
    
    // Optimisation pour mobile
    engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
});

// Gestion de la réactivitéwindow.addEventListener("resize", () => {
    engine.resize();
});

// Optimisation des performances
scene.registerBeforeRender(() => {
    // Ajoutez ici les mises à jour par image
});

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

class ThreeJSApp {
    constructor() {
        this.scene = new THREE.Scene();
        this.camera = null;
        this.renderer = null;
        this.controls = null;
        this.model = null;
        this.mixer = null;
        this.clock = new THREE.Clock();
        
        this.init();
        this.loadModel();
        this.animate();
    }
    
    init() {
        // Configuration de la scènethis.scene.background = new THREE.Color(0xf0f0f0);
        this.scene.fog = new THREE.Fog(0xf0f0f0, 10, 50);
        
        // Camérathis.camera = new THREE.PerspectiveCamera(
            50,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        this.camera.position.set(5, 5, 5);
        
        // Rendu avec optimisationsthis.renderer = new THREE.WebGLRenderer({
            antialias: true,
            powerPreference: "high-performance"
        });
        this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
        this.renderer.setSize(window.innerWidth, window.innerHeight);
        this.renderer.shadowMap.enabled = true;
        this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        this.renderer.outputEncoding = THREE.sRGBEncoding;
        this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
        document.body.appendChild(this.renderer.domElement);
        
        // Lumièresconst ambient = new THREE.AmbientLight(0xffffff, 0.4);
        this.scene.add(ambient);
        
        const directional = new THREE.DirectionalLight(0xffffff, 0.6);
        directional.position.set(5, 10, 5);
        directional.castShadow = true;
        directional.shadow.camera.near = 0.1;
        directional.shadow.camera.far = 50;
        directional.shadow.camera.left = -10;
        directional.shadow.camera.right = 10;
        directional.shadow.camera.top = 10;
        directional.shadow.camera.bottom = -10;
        directional.shadow.mapSize.width = 2048;
        directional.shadow.mapSize.height = 2048;
        this.scene.add(directional);
        
        // Solconst groundGeometry = new THREE.PlaneGeometry(50, 50);
        const groundMaterial = new THREE.MeshStandardMaterial({
            color: 0xcccccc,
            roughness: 0.8,
            metalness: 0.2
        });
        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = -Math.PI / 2;
        ground.receiveShadow = true;
        this.scene.add(ground);
        
        // Contrôlesthis.controls = new OrbitControls(this.camera, this.renderer.domElement);
        this.controls.enableDamping = true;
        this.controls.dampingFactor = 0.05;
        this.controls.screenSpacePanning = false;
        this.controls.minDistance = 1;
        this.controls.maxDistance = 50;
        this.controls.maxPolarAngle = Math.PI / 2;
        
        // Écouteurs d'événementswindow.addEventListener('resize', this.onWindowResize.bind(this));
    }
    
    loadModel() {
        // Gestionnaire de chargement pour le suivi de la progressionconst manager = new THREE.LoadingManager();
        
        manager.onStart = (url, itemsLoaded, itemsTotal) => {
            console.log(`Début du chargement : ${url}`);
            this.showLoader(true);
        };
        
        manager.onProgress = (url, itemsLoaded, itemsTotal) => {
            const progress = (itemsLoaded / itemsTotal) * 100;
            this.updateLoader(progress);
        };
        
        manager.onLoad = () => {
            console.log('Chargement terminé !');
            this.showLoader(false);
        };
        
        manager.onError = (url) => {
            console.error(`Erreur lors du chargement de ${url}`);
            this.showError('Échec du chargement du modèle 3D');
        };
        
        // Chargeur DRACO pour la géométrie compressée (optionnel mais recommandé)const dracoLoader = new DRACOLoader(manager);
        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
        
        // Chargeur GLTFconst loader = new GLTFLoader(manager);
        loader.setDRACOLoader(dracoLoader);
        
        // Charger le modèle
        loader.load(
            './models/your-tripo-model.glb',
            (gltf) => {
                this.model = gltf.scene;
                
                // Centrer et redimensionner le modèleconst box = new THREE.Box3().setFromObject(this.model);
                const center = box.getCenter(new THREE.Vector3());
                const size = box.getSize(new THREE.Vector3());
                
                // Centrer le modèlethis.model.position.sub(center);
                
                // Ajuster à la vueconst maxDim = Math.max(size.x, size.y, size.z);
                const scale = 5 / maxDim;
                this.model.scale.multiplyScalar(scale);
                
                // Activer les ombresthis.model.traverse((child) => {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                        
                        // Assurer des matériaux double face pour les modèles générés par IAif (child.material) {
                            child.material.side = THREE.DoubleSide;
                        }
                    }
                });
                
                // Ajouter à la scènethis.scene.add(this.model);
                
                // Gérer les animations si présentesif (gltf.animations && gltf.animations.length > 0) {
                    this.mixer = new THREE.AnimationMixer(this.model);
                    
                    // Lire toutes les animations
                    gltf.animations.forEach((clip) => {
                        const action = this.mixer.clipAction(clip);
                        action.play();
                    });
                }
                
                // Ajuster la caméra pour s'adapter au modèlethis.fitCameraToObject(this.model);
            }
        );
    }
    
    fitCameraToObject(object) {
        const box = new THREE.Box3().setFromObject(object);
        const size = box.getSize(new THREE.Vector3());
        const center = box.getCenter(new THREE.Vector3());
        
        const maxDim = Math.max(size.x, size.y, size.z);
        const fov = this.camera.fov * (Math.PI / 180);
        const cameraZ = Math.abs(maxDim / 2 / Math.tan(fov / 2));
        
        this.camera.position.set(cameraZ, cameraZ, cameraZ);
        this.controls.target = center;
        this.controls.update();
    }
    
    animate() {
        requestAnimationFrame(this.animate.bind(this));
        
        const delta = this.clock.getDelta();
        
        // Mettre à jour les animationsif (this.mixer) {
            this.mixer.update(delta);
        }
        
        // Mettre à jour les contrôlesthis.controls.update();
        
        // Renduthis.renderer.render(this.scene, this.camera);
    }
    
    onWindowResize() {
        this.camera.aspect = window.innerWidth / window.innerHeight;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(window.innerWidth, window.innerHeight);
    }
    
    showLoader(show) {
        let loader = document.getElementById('loader');
        if (!loader && show) {
            loader = document.createElement('div');
            loader.id = 'loader';
            loader.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 20px;
                border-radius: 10px;
                font-family: Arial, sans-serif;
                z-index: 1000;
            `;
            document.body.appendChild(loader);
        }
        if (loader) {
            loader.style.display = show ? 'block' : 'none';
        }
    }
    
    updateLoader(progress) {
        const loader = document.getElementById('loader');
        if (loader) {
            loader.textContent = `Chargement : ${Math.round(progress)}%`;
        }
    }
    
    showError(message) {
        const loader = document.getElementById('loader');
        if (loader) {
            loader.textContent = message;
            loader.style.background = 'rgba(255,0,0,0.8)';
        }
    }
}

// Initialisation de l'applicationconst app = new ThreeJSApp();

// Optimiser les textures pendant le chargement
loader.load('./models/your-model.glb', (gltf) => {
    gltf.scene.traverse((child) => {
        if (child.isMesh && child.material) {
            // Optimiser les texturesif (child.material.map) {
                child.material.map.minFilter = THREE.LinearMipmapLinearFilter;
                child.material.map.anisotropy = renderer.capabilities.getMaxAnisotropy();
            }
            
            // Activer l'instanciation GPU pour les maillages répétésif (child.geometry) {
                child.geometry.computeBoundingSphere();
                child.frustumCulled = true;
            }
        }
    });
});

class LODManager {
    constructor(scene, camera) {
        this.scene = scene;
        this.camera = camera;
        this.lodGroups = new Map();
    }
    
    addLODModel(name, levels) {
        const lod = new THREE.LOD();
        
        levels.forEach(({ url, distance }) => {
            const loader = new GLTFLoader();
            loader.load(url, (gltf) => {
                lod.addLevel(gltf.scene, distance);
            });
        });
        
        this.scene.add(lod);
        this.lodGroups.set(name, lod);
        return lod;
    }
    
    update() {
        this.lodGroups.forEach(lod => {
            lod.update(this.camera);
        });
    }
}

// Utilisationconst lodManager = new LODManager(scene, camera);
lodManager.addLODModel('tripoModel', [
    { url: './models/high-detail.glb', distance: 0 },
    { url: './models/medium-detail.glb', distance: 10 },
    { url: './models/low-detail.glb', distance: 20 }
]);

// Compresser les textures avant l'envoi au GPU
function compressTexture(texture) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Redimensionner à une puissance de 2const size = Math.pow(2, Math.floor(Math.log2(Math.max(texture.image.width, texture.image.height))));
    canvas.width = size;
    canvas.height = size;
    
    ctx.drawImage(texture.image, 0, 0, size, size);
    
    // Créer la texture compresséeconst compressedTexture = new THREE.CanvasTexture(canvas);
    compressedTexture.minFilter = THREE.LinearMipmapLinearFilter;
    compressedTexture.generateMipmaps = true;
    
    return compressedTexture;
}

class PerformanceMonitor {
    constructor() {
        this.fps = 0;
        this.frameCount = 0;
        this.lastTime = performance.now();
        
        this.createDisplay();
    }
    
    createDisplay() {
        this.display = document.createElement('div');
        this.display.style.cssText = `
            position: fixed;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: #00ff00;
            padding: 10px;
            font-family: monospace;
            font-size: 14px;
            z-index: 1000;
        `;
        document.body.appendChild(this.display);
    }
    
    update() {
        this.frameCount++;
        const currentTime = performance.now();
        
        if (currentTime >= this.lastTime + 1000) {
            this.fps = Math.round((this.frameCount * 1000) / (currentTime - this.lastTime));
            this.frameCount = 0;
            this.lastTime = currentTime;
            
            this.display.textContent = `FPS: ${this.fps}`;
            
            // Ajustement automatique de la qualité en fonction des FPSif (this.fps < 30) {
                this.reduceQuality();
            } else if (this.fps > 55) {
                this.increaseQuality();
            }
        }
    }
    
    reduceQuality() {
        // Implémenter la logique de réduction de qualitéconsole.log('Réduction de la qualité pour de meilleures performances');
    }
    
    increaseQuality() {
        // Implémenter la logique d'augmentation de qualitéconsole.log('Augmentation de la qualité');
    }
}

// package.json
{"scripts": {"optimize-models": "gltf-pipeline -i ./models/raw/*.glb -o ./models/optimized/ -d","build": "npm run optimize-models && webpack"}}

const MODEL_CDN = 'https://your-cdn.com/models/';

function loadModelFromCDN(modelName) {
    return new Promise((resolve, reject) => {
        const loader = new GLTFLoader();
        loader.load(
            `${MODEL_CDN}${modelName}`,
            resolve,
            (progress) => console.log('Loading:', progress.loaded / progress.total * 100 + '%'),
            reject
        );
    });
}

class ProgressiveLoader {
    constructor() {
        this.loadQueue = [];
        this.isLoading = false;
        this.loadedModels = new Map();
    }
    
    addToQueue(priority, modelInfo) {
        this.loadQueue.push({ priority, ...modelInfo });
        this.loadQueue.sort((a, b) => b.priority - a.priority);
        this.processQueue();
    }
    
    async processQueue() {
        if (this.isLoading || this.loadQueue.length === 0) return;
        
        this.isLoading = true;
        const { url, name, onLoad } = this.loadQueue.shift();
        
        try {
            const loader = new GLTFLoader();
            const gltf = await loader.loadAsync(url);
            
            this.loadedModels.set(name, gltf.scene);
            if (onLoad) onLoad(gltf.scene);
            
        } catch (error) {
            console.error(`Failed to load ${name}:`, error);
        }
        
        this.isLoading = false;
        this.processQueue();
    }
    
    preloadCritical(models) {
        models.forEach(model => {
            this.addToQueue(10, model);
        });
    }
    
    loadOnDemand(modelInfo) {
        if (this.loadedModels.has(modelInfo.name)) {
            return Promise.resolve(this.loadedModels.get(modelInfo.name));
        }
        
        return new Promise((resolve) => {
            this.addToQueue(5, {
                ...modelInfo,
                onLoad: resolve
            });
        });
    }
}

// Exemple d'utilisationconst loader = new ProgressiveLoader();

// Précharger les modèles critiques
loader.preloadCritical([
    { name: 'hero-model', url: './models/hero.glb' },
    { name: 'environment', url: './models/environment.glb' }
]);

// Charger lors de l'interaction de l'utilisateurdocument.getElementById('load-extra').addEventListener('click', async () => {
    const model = await loader.loadOnDemand({
        name: 'extra-model',
        url: './models/extra.glb'
    });
    scene.add(model);
});

class ResourceManager {
    constructor() {
        this.resources = new Map();
    }
    
    addResource(name, resource) {
        this.resources.set(name, resource);
    }
    
    disposeResource(name) {
        const resource = this.resources.get(name);
        if (!resource) return;
        
        resource.traverse((child) => {
            if (child.geometry) {
                child.geometry.dispose();
            }
            
            if (child.material) {
                if (Array.isArray(child.material)) {
                    child.material.forEach(mat => this.disposeMaterial(mat));
                } else {
                    this.disposeMaterial(child.material);
                }
            }
        });
        
        this.resources.delete(name);
    }
    
    disposeMaterial(material) {
        // Libérer les textures
        ['map', 'normalMap', 'roughnessMap', 'metalnessMap', 'aoMap'].forEach(prop => {
            if (material[prop]) {
                material[prop].dispose();
            }
        });
        
        material.dispose();
    }
    
    disposeAll() {
        this.resources.forEach((resource, name) => {
            this.disposeResource(name);
        });
    }
}

class DeviceOptimizer {
    constructor(renderer) {
        this.renderer = renderer;
        this.isMobile = /Android|webOS|iPhone|iPad|iPod/i.test(navigator.userAgent);
        this.gpu = this.detectGPU();
        
        this.applyOptimizations();
    }
    
    detectGPU() {
        const canvas = document.createElement('canvas');
        const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
        const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
        
        if (debugInfo) {
            return gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL);
        }
        return 'unknown';
    }
    
    applyOptimizations() {
        if (this.isMobile) {
            // Optimisations mobilesthis.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            this.renderer.shadowMap.enabled = false;
            
            // Réduire la taille des texturesTHREE.DefaultLoadingManager.onLoad = () => {
                this.renderer.capabilities.maxTextureSize = 2048;
            };
        } else {
            // Optimisations de bureauthis.renderer.setPixelRatio(window.devicePixelRatio);
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        }
        
        // Paramètres spécifiques au GPUif (this.gpu.includes('Intel')) {
            console.log('GPU Intel détecté, application de paramètres conservateurs');
            this.renderer.capabilities.precision = 'mediump';
        }
    }
    
    getRecommendedModelQuality() {
        if (this.isMobile) return 'low';
        if (this.gpu.includes('Intel')) return 'medium';
        return 'high';
    }
}

// Utilisationconst optimizer = new DeviceOptimizer(renderer);
const quality = optimizer.getRecommendedModelQuality();

// TripoModelViewer.jsximport React, { useEffect, useRef } from 'react';
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const TripoModelViewer = ({ modelUrl, width = '100%', height = '500px' }) => {
    const mountRef = useRef(null);
    const sceneRef = useRef(null);
    
    useEffect(() => {
        const mount = mountRef.current;
        
        // Configuration de la scèneconst scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);
        
        // Caméraconst camera = new THREE.PerspectiveCamera(
            50,
            mount.clientWidth / mount.clientHeight,
            0.1,
            1000
        );
        camera.position.set(5, 5, 5);
        
        // Renduconst renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(mount.clientWidth, mount.clientHeight);
        mount.appendChild(renderer.domElement);
        
        // Lumièresconst ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);
        
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(5, 10, 5);
        scene.add(directionalLight);
        
        // Contrôlesconst controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        
        // Charger le modèleconst loader = new GLTFLoader();
        loader.load(modelUrl, (gltf) => {
            scene.add(gltf.scene);
            
            // Centrage et redimensionnement automatiquesconst box = new THREE.Box3().setFromObject(gltf.scene);
            const center = box.getCenter(new THREE.Vector3());
            gltf.scene.position.sub(center);
        });
        
        // Boucle d'animationconst animate = () => {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        };
        animate();
        
        // Gérer le redimensionnementconst handleResize = () => {
            camera.aspect = mount.clientWidth / mount.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(mount.clientWidth, mount.clientHeight);
        };
        window.addEventListener('resize', handleResize);
        
        // Stocker la référence de la scène
        sceneRef.current = { scene, camera, renderer, controls };
        
        // Nettoyagereturn () => {
            window.removeEventListener('resize', handleResize);
            mount.removeChild(renderer.domElement);
            renderer.dispose();
        };
    }, [modelUrl]);
    
    return <div ref={mountRef} style={{ width, height }} />;
};

export default TripoModelViewer;

// Utilisation dans votre application Reactfunction App() {
    return (
        <div>
            <h1>Mon modèle Tripo AI</h1>
            <TripoModelViewer modelUrl="./models/my-model.glb" />
        </div>
    );
}

// TripoModelViewer.vue
<template>
  <div ref="container" :style="{ width: width, height: height }"></div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  name: 'TripoModelViewer',
  props: {
    modelUrl: String,
    width: { type: String, default: '100%' },
    height: { type: String, default: '500px' }
  },
  mounted() {
    this.initThree();
    this.loadModel();
  },
  methods: {
    initThree() {
      // Configuration Three.js similaire à l'exemple React
      this.scene = new THREE.Scene();
      // ... reste de l'initialisation
    },
    loadModel() {
      const loader = new GLTFLoader();
      loader.load(this.modelUrl, (gltf) => {
        this.scene.add(gltf.scene);
      });
    }
  },
  beforeDestroy() {
    // Nettoyage des ressources Three.js
    if (this.renderer) {
      this.renderer.dispose();
    }
  }
};
</script>

class PerformanceBenchmark {
    constructor() {
        this.metrics = {
            loadTime: 0,
            frameRate: [],
            memoryUsage: [],
            drawCalls: 0
        };
    }
    
    startLoadTimer() {
        this.loadStart = performance.now();
    }
    
    endLoadTimer() {
        this.metrics.loadTime = performance.now() - this.loadStart;
        console.log(`Model loaded in ${this.metrics.loadTime.toFixed(2)}ms`);
    }
    
    measureFrame(renderer) {
        // Taux de rafraîchissementthis.metrics.frameRate.push(renderer.info.render.frame);
        
        // Utilisation de la mémoireif (performance.memory) {
            this.metrics.memoryUsage.push({
                used: performance.memory.usedJSHeapSize / 1048576,
                total: performance.memory.totalJSHeapSize / 1048576
            });
        }
        
        // Appels de dessinis.metrics.drawCalls = renderer.info.render.calls;
    }
    
    getReport() {
        const avgFrameRate = this.metrics.frameRate.reduce((a, b) => a + b, 0) / this.metrics.frameRate.length;
        const avgMemory = this.metrics.memoryUsage.reduce((a, b) => a + b.used, 0) / this.metrics.memoryUsage.length;
        
        return {
            loadTime: `${this.metrics.loadTime.toFixed(2)}ms`,
            avgFrameRate: avgFrameRate.toFixed(2),
            avgMemoryMB: avgMemory.toFixed(2),
            drawCalls: this.metrics.drawCalls
        };
    }
}