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

Erstellen Sie eine vollständige Webanwendung, die ein GLB-3D-Modell anzeigt, das sich unter './models/your-tripo-model.glb' befindet. 

Anforderungen:
1. Richten Sie sowohl Babylon.js- als auch Three.js-Beispiele in separaten HTML-Dateien ein
2. Binden Sie alle erforderlichen Abhängigkeiten über CDN ein
3. Fügen Sie eine angemessene Beleuchtung, Kamerasteuerung und ein responsives Canvas hinzu
4. Implementieren Sie Orbit-Controls für die Benutzerinteraktion
5. Fügen Sie Ladefortschrittsanzeigen hinzu
6. Erstellen Sie eine index.html mit Links zu beiden Beispielen
7. Implementieren Sie eine Fehlerbehandlung für fehlgeschlagene Modellladungen
8. Fügen Sie Kommentare hinzu, die jeden Abschnitt erklären
9. Stellen Sie sicher, dass es mit 'python -m http.server' für lokale Tests funktioniert

Das Modell sollte zentriert, richtig beleuchtet und mit der Maus drehbar sein.

python -m http.server 8000
# Oder wenn Sie Node.js bevorzugen:
npx http-server

_// Three.js-Beispiel - GLB-Modell-Loader_
_// Dieses Beispiel zeigt, wie ein GLB-Modell mit Three.js geladen und angezeigt wird_

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**() {
        _// Kamera einrichten_
        this.camera.position.set(5, 5, 5);
        this.camera.lookAt(0, 0, 0);

        _// Beleuchtung einrichten_
        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);

        _// OrbitControls hinzufügen_
        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;

        _// GLB-Modell laden_
        this.loadModel();

        _// Fenstergrößenänderung handhaben_
        window.addEventListener('resize', () => {
            this.camera.aspect = window.innerWidth / window.innerHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(window.innerWidth, window.innerHeight);
        });

        _// Animationsschleife starten_
        this.animate();
    }

    **loadModel**() {
        const loader = new GLTFLoader();
        
        console.log('GLB-Modell wird geladen...');
        loader.load(
            'models/your-model1.glb',
            (_gltf_) => {
                console.log('Modell erfolgreich geladen:', _gltf_);
                
                _// Modell zur Szene hinzufügen_
                this.scene.add(_gltf_.scene);
                
                _// Modell zentrieren_
                this.centerModel(_gltf_.scene);
                
                _// Bodenfläche als Referenz hinzufügen_
                this.createGround();
                
                _// Schatten für alle Meshes aktivieren_
                _gltf_.scene.traverse((_child_) => {
                    if (_child_.isMesh) {
                        _child_.castShadow = true;
                        _child_.receiveShadow = true;
                    }
                });
                
            },
            (_progress_) => {
                console.log('Ladefortschritt:', (_progress_.loaded / _progress_.total * 100) + '%');
            },
            (_error_) => {
                console.error('Fehler beim Laden des Modells:', _error_);
                this.createPlaceholderCube();
            }
        );
    }

    **centerModel**(_model_) {
        _// Bounding Box berechnen, um das Modell zu zentrieren_
        const box = new THREE.Box3().setFromObject(_model_);
        const center = box.getCenter(new THREE.Vector3());
        const size = box.getSize(new THREE.Vector3());
        
        _// Modell zentrieren_
        _model_.position.sub(center);
        
        _// Modell bei Bedarf auf eine angemessene Größe skalieren_
        const maxDim = Math.max(size.x, size.y, size.z);
        if (maxDim > 10) {
            const scale = 5 / maxDim;
            _model_.scale.setScalar(scale);
        }
    }

    **createGround**() {
        _// Eine Bodenfläche als Referenz erstellen_
        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**() {
        _// Einen Platzhalter-Würfel erstellen, falls das Laden des Modells fehlschlägt_
        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());
        
        _// Steuerungen aktualisieren_
        this.controls.update();
        
        _// Szene rendern_
        this.renderer.render(this.scene, this.camera);
    }
}

_// Initialisieren, wenn DOM geladen ist_
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);
    
    // Kamera mit besserer Positionierungconst 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;
    
    // Verbessertes Beleuchtungs-Setupconst 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;
    
    // Schattengeneratorconst shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight);
    shadowGenerator.useBlurExponentialShadowMap = true;
    
    // Boden für Schattenconst ground = BABYLON.MeshBuilder.CreateGround(
        "ground",
        { width: 20, height: 20 },
        scene
    );
    ground.receiveShadows = true;
    
    // Importieren von KI-generierten 3D-Assets mit Fehlerbehandlungtry {
        const result = await BABYLON.SceneLoader.ImportMeshAsync(
            "",
            "./models/",
            "your-tripo-model.glb",
            scene
        );
        
        // Importierte Meshes verarbeiten
        result.meshes.forEach(mesh => {
            shadowGenerator.addShadowCaster(mesh);
            if (mesh.material) {
                mesh.material.backFaceCulling = false;
            }
        });
        
        // Modell zentrieren und skalierenconst rootMesh = result.meshes[0];
        const bounds = rootMesh.getHierarchyBoundingVectors();
        const center = bounds.max.add(bounds.min).scale(0.5);
        rootMesh.position = center.negate();
        
        // Kamera automatisch anpassen
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.radius = bounds.max.subtract(bounds.min).length() * 1.5;
        
    } catch (error) {
        console.error("Failed to load model:", error);
        // Fehleranzeige erstellenconst errorText = new BABYLON.GUI.TextBlock();
        errorText.text = "Failed to load 3D model";
        errorText.color = "red";
        errorText.fontSize = 24;
    }
    
    return scene;
};

// Initialisieren und ausführencreateScene().then(scene => {
    engine.runRenderLoop(() => {
        scene.render();
    });
    
    // Optimierung für Mobilgeräte
    engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
});

// Responsives Handlingwindow.addEventListener("resize", () => {
    engine.resize();
});

// Performance-Optimierung
scene.registerBeforeRender(() => {
    // Fügen Sie hier Aktualisierungen pro Frame hinzu
});

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() {
        // Szenen-Setupthis.scene.background = new THREE.Color(0xf0f0f0);
        this.scene.fog = new THREE.Fog(0xf0f0f0, 10, 50);
        
        // Kamerathis.camera = new THREE.PerspectiveCamera(
            50,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        this.camera.position.set(5, 5, 5);
        
        // Renderer mit Optimierungenthis.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);
        
        // Beleuchtungconst 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);
        
        // Bodenconst 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);
        
        // Steuerungeuthis.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;
        
        // Event-Listenerwindow.addEventListener('resize', this.onWindowResize.bind(this));
    }
    
    loadModel() {
        // Loading-Manager für Fortschrittsverfolgungconst manager = new THREE.LoadingManager();
        
        manager.onStart = (url, itemsLoaded, itemsTotal) => {
            console.log(`Started loading: ${url}`);
            this.showLoader(true);
        };
        
        manager.onProgress = (url, itemsLoaded, itemsTotal) => {
            const progress = (itemsLoaded / itemsTotal) * 100;
            this.updateLoader(progress);
        };
        
        manager.onLoad = () => {
            console.log('Loading complete!');
            this.showLoader(false);
        };
        
        manager.onError = (url) => {
            console.error(`Error loading ${url}`);
            this.showError('Failed to load 3D model');
        };
        
        // DRACO-Loader für komprimierte Geometrie (optional, aber empfohlen)const dracoLoader = new DRACOLoader(manager);
        dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
        
        // GLTF-Loaderconst loader = new GLTFLoader(manager);
        loader.setDRACOLoader(dracoLoader);
        
        // Modell laden
        loader.load(
            './models/your-tripo-model.glb',
            (gltf) => {
                this.model = gltf.scene;
                
                // Modell zentrieren und skalierenconst box = new THREE.Box3().setFromObject(this.model);
                const center = box.getCenter(new THREE.Vector3());
                const size = box.getSize(new THREE.Vector3());
                
                // Modell zentrierenthis.model.position.sub(center);
                
                // Skalieren, um in die Ansicht zu passenconst maxDim = Math.max(size.x, size.y, size.z);
                const scale = 5 / maxDim;
                this.model.scale.multiplyScalar(scale);
                
                // Schatten aktivierenthis.model.traverse((child) => {
                    if (child.isMesh) {
                        child.castShadow = true;
                        child.receiveShadow = true;
                        
                        // Doppelseitige Materialien für KI-generierte Modelle sicherstellenif (child.material) {
                            child.material.side = THREE.DoubleSide;
                        }
                    }
                });
                
                // Zur Szene hinzufügenthis.scene.add(this.model);
                
                // Animationen verarbeiten, falls vorhandenif (gltf.animations && gltf.animations.length > 0) {
                    this.mixer = new THREE.AnimationMixer(this.model);
                    
                    // Alle Animationen abspielen
                    gltf.animations.forEach((clip) => {
                        const action = this.mixer.clipAction(clip);
                        action.play();
                    });
                }
                
                // Kamera an das Modell anpassenthis.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();
        
        // Animationen aktualisierenif (this.mixer) {
            this.mixer.update(delta);
        }
        
        // Steuerungen aktualisierenthis.controls.update();
        
        // Rendernthis.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 = `Loading: ${Math.round(progress)}%`;
        }
    }
    
    showError(message) {
        const loader = document.getElementById('loader');
        if (loader) {
            loader.textContent = message;
            loader.style.background = 'rgba(255,0,0,0.8)';
        }
    }
}

// Anwendung initialisierenconst app = new ThreeJSApp();

// Texturen während des Ladens optimieren
loader.load('./models/your-model.glb', (gltf) => {
    gltf.scene.traverse((child) => {
        if (child.isMesh && child.material) {
            // Texturen optimierenif (child.material.map) {
                child.material.map.minFilter = THREE.LinearMipmapLinearFilter;
                child.material.map.anisotropy = renderer.capabilities.getMaxAnisotropy();
            }
            
            // GPU-Instancing für wiederholte Meshes aktivierenif (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);
        });
    }
}

// Verwendungconst 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 }
]);

// Texturen vor dem Hochladen auf die GPU komprimierenfunction compressTexture(texture) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Auf Zweierpotenz skalierenconst 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);
    
    // Komprimierte Textur erstellenconst 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}`;
            
            // Qualität basierend auf FPS automatisch anpassenif (this.fps < 30) {
                this.reduceQuality();
            } else if (this.fps > 55) {
                this.increaseQuality();
            }
        }
    }
    
    reduceQuality() {
        // Logik zur Qualitätsreduzierung implementierenconsole.log('Reducing quality for better performance');
    }
    
    increaseQuality() {
        // Logik zur Qualitätssteigerung implementierenconsole.log('Increasing quality');
    }
}

// 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
            });
        });
    }
}

// Anwendungsbeispielconst loader = new ProgressiveLoader();

// Kritische Modelle vorab laden
loader.preloadCritical([
    { name: 'hero-model', url: './models/hero.glb' },
    { name: 'environment', url: './models/environment.glb' }
]);

// Bei Benutzerinteraktion ladendocument.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) {
        // Texturen freigeben
        ['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) {
            // Optimierungen für Mobilgerätethis.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            this.renderer.shadowMap.enabled = false;
            
            // Texturgrößen reduzierenTHREE.DefaultLoadingManager.onLoad = () => {
                this.renderer.capabilities.maxTextureSize = 2048;
            };
        } else {
            // Optimierungen für Desktopthis.renderer.setPixelRatio(window.devicePixelRatio);
            this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        }
        
        // GPU-spezifische Einstellungenif (this.gpu.includes('Intel')) {
            console.log('Intel GPU detected, applying conservative settings');
            this.renderer.capabilities.precision = 'mediump';
        }
    }
    
    getRecommendedModelQuality() {
        if (this.isMobile) return 'low';
        if (this.gpu.includes('Intel')) return 'medium';
        return 'high';
    }
}

// Usageconst 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;
        
        // Szenen-Setupconst scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0);
        
        // Kameraconst camera = new THREE.PerspectiveCamera(
            50,
            mount.clientWidth / mount.clientHeight,
            0.1,
            1000
        );
        camera.position.set(5, 5, 5);
        
        // Rendererconst renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(mount.clientWidth, mount.clientHeight);
        mount.appendChild(renderer.domElement);
        
        // Beleuchtungconst 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);
        
        // Steuerungenconst controls = new OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;
        
        // Modell ladenconst loader = new GLTFLoader();
        loader.load(modelUrl, (gltf) => {
            scene.add(gltf.scene);
            
            // Automatisch zentrieren und skalierenconst box = new THREE.Box3().setFromObject(gltf.scene);
            const center = box.getCenter(new THREE.Vector3());
            gltf.scene.position.sub(center);
        });
        
        // Animationsschleifeconst animate = () => {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        };
        animate();
        
        // Größenänderung handhabenconst handleResize = () => {
            camera.aspect = mount.clientWidth / mount.clientHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(mount.clientWidth, mount.clientHeight);
        };
        window.addEventListener('resize', handleResize);
        
        // Szenenreferenz speichern
        sceneRef.current = { scene, camera, renderer, controls };
        
        // Aufräumenreturn () => {
            window.removeEventListener('resize', handleResize);
            mount.removeChild(renderer.domElement);
            renderer.dispose();
        };
    }, [modelUrl]);
    
    return <div ref={mountRef} style={{ width, height }} />;
};

export default TripoModelViewer;

// Verwendung in Ihrer React-Appfunction App() {
    return (
        <div>
            <h1>My Tripo AI Model</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() {
      // Ähnliches Three.js-Setup wie im React-Beispiel
      this.scene = new THREE.Scene();
      // ... Rest der Initialisierung
    },
    loadModel() {
      const loader = new GLTFLoader();
      loader.load(this.modelUrl, (gltf) => {
        this.scene.add(gltf.scene);
      });
    }
  },
  beforeDestroy() {
    // Three.js-Ressourcen freigeben
    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) {
        // Framerate
        this.metrics.frameRate.push(renderer.info.render.frame);
        
        // Speichernutzung
        if (performance.memory) {
            this.metrics.memoryUsage.push({
                used: performance.memory.usedJSHeapSize / 1048576,
                total: performance.memory.totalJSHeapSize / 1048576
            });
        }
        
        // Draw-Calls
        this.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
        };
    }
}