Spaces:

mohamedtsou
/

scleton

Sleeping

App Files Files Community

mohamedtsou commited on Feb 25

Commit

ca90ee2

verified ·

1 Parent(s): bed8541

Update view.html

Browse files

Files changed (1) hide show

view.html +219 -81

view.html CHANGED Viewed

@@ -3,107 +3,245 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Visualisation 3D</title>
     <style>
-        body { margin: 0; overflow: hidden; background: #111; color: white; font-family: Arial; }
         #info {
-            position: absolute; top: 20px; left: 20px;
-            background: rgba(0,0,0,0.7); padding: 15px 25px;
-            border-radius: 8px; border-left: 4px solid #00aaff;
-            z-index: 100;
         }
         #status {
-            position: absolute; bottom: 30px; left: 50%;
             transform: translateX(-50%);
-            background: rgba(0,0,0,0.7); color: #ffaa00;
-            padding: 10px 20px; border-radius: 30px;
-            z-index: 100;
         }
     </style>
 </head>
 <body>
     <div id="info">
-        <h2>🔬 Modèle: SubTool-0-3517926.OBJ</h2>
-        <p>Souris: Rotation | Scroll: Zoom</p>
     </div>
-    <div id="status">Chargement...</div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
     <script>
-        const statusDiv = document.getElementById('status');
-        // Scene
-        const scene = new THREE.Scene();
-        scene.background = new THREE.Color(0x111122);
-        // Camera
-        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
-        camera.position.set(5, 3, 8);
-        // Renderer
-        const renderer = new THREE.WebGLRenderer({ antialias: true });
-        renderer.setSize(window.innerWidth, window.innerHeight);
-        document.body.appendChild(renderer.domElement);
-        // Controls
-        const controls = new THREE.OrbitControls(camera, renderer.domElement);
-        controls.enableDamping = true;
-        controls.autoRotate = true;
-        controls.autoRotateSpeed = 2;
-        // Lumières
-        scene.add(new THREE.AmbientLight(0x404060));
-        const light = new THREE.DirectionalLight(0xffffff, 1);
-        light.position.set(2, 5, 3);
-        scene.add(light);
-        // Grille
-        scene.add(new THREE.GridHelper(10, 20, 0x88aaff, 0x335588));
-        // Chargement
-        statusDiv.innerHTML = '🔍 Chargement du modèle...';
-        const loader = new THREE.OBJLoader();
-        loader.load(
-            'SubTool-0-3517926.OBJ',
-            (obj) => {
-                // Centrer
-                const box = new THREE.Box3().setFromObject(obj);
-                const center = box.getCenter(new THREE.Vector3());
-                obj.position.set(-center.x, -center.y, -center.z);
-                scene.add(obj);
-                statusDiv.innerHTML = '✅ Modèle chargé!';
-            },
-            (xhr) => {
-                if (xhr.lengthComputable) {
-                    const pct = Math.round((xhr.loaded / xhr.total) * 100);
-                    statusDiv.innerHTML = `📊 Chargement: ${pct}%`;
                 }
-            },
-            (error) => {
-                statusDiv.innerHTML = '❌ Erreur de chargement';
-                console.error(error);
             }
-        );
-        // Animation
-        function animate() {
-            requestAnimationFrame(animate);
-            controls.update();
-            renderer.render(scene, camera);
-        }
-        animate();
-        // Resize
-        window.addEventListener('resize', () => {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Visualisation 3D - SubTool</title>
     <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            margin: 0;
+            overflow: hidden;
+            font-family: 'Segoe UI', system-ui, sans-serif;
+            background-color: #0a0a1a;
+        }
         #info {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(10, 10, 26, 0.85);
+            backdrop-filter: blur(10px);
+            color: white;
+            padding: 16px 24px;
+            border-radius: 12px;
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
+            z-index: 1000;
+            pointer-events: none;
+            border-left: 4px solid #3b82f6;
+        }
+        #info h2 {
+            font-size: 1.1rem;
+            font-weight: 500;
+            margin-bottom: 4px;
+            color: #3b82f6;
+        }
+        #info p {
+            font-size: 0.85rem;
+            opacity: 0.7;
         }
         #status {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
             transform: translateX(-50%);
+            background: rgba(0, 0, 0, 0.7);
+            backdrop-filter: blur(10px);
+            color: #fbbf24;
+            padding: 12px 28px;
+            border-radius: 40px;
+            font-size: 0.95rem;
+            font-weight: 500;
+            border: 1px solid rgba(255,255,255,0.1);
+            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+            z-index: 1000;
+            letter-spacing: 0.3px;
+        }
+        #hf-badge {
+            position: absolute;
+            bottom: 30px;
+            right: 30px;
+            color: rgba(255,255,255,0.4);
+            font-size: 0.8rem;
+            background: rgba(0,0,0,0.3);
+            padding: 6px 12px;
+            border-radius: 20px;
+            backdrop-filter: blur(5px);
+            z-index: 1000;
+        }
+        .loading-bar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            height: 3px;
+            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+            width: 0%;
+            transition: width 0.3s ease;
+            z-index: 2000;
         }
     </style>
 </head>
 <body>
+    <div class="loading-bar" id="loadingBar"></div>
     <div id="info">
+        <h2>🔬 SubTool-0-3517926.OBJ</h2>
+        <p>🖱️ Rotation · Scroll: Zoom · Glisser: Déplacer</p>
+    </div>
+    <div id="status">
+        <span id="statusText">Initialisation...</span>
+    </div>
+    <div id="hf-badge">
+        🤗 Hugging Face Spaces · Docker
     </div>
+    <!-- Three.js depuis CDN -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/loaders/OBJLoader.js"></script>
     <script>
+        (function() {
+            const statusText = document.getElementById('statusText');
+            const loadingBar = document.getElementById('loadingBar');
+            // Mise à jour du statut
+            function setStatus(message, percent) {
+                statusText.textContent = message;
+                if (percent !== undefined) {
+                    loadingBar.style.width = percent + '%';
+                }
+            }
+            try {
+                // Vérifier que Three.js est chargé
+                if (typeof THREE === 'undefined') {
+                    throw new Error('Three.js non chargé');
+                }
+                setStatus('Préparation de la scène...', 10);
+                // --- Configuration de base ---
+                const scene = new THREE.Scene();
+                scene.background = new THREE.Color(0x0a0a1a);
+                const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
+                camera.position.set(5, 3, 8);
+                const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
+                renderer.setSize(window.innerWidth, window.innerHeight);
+                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+                document.body.appendChild(renderer.domElement);
+                // --- Contrôles ---
+                const controls = new THREE.OrbitControls(camera, renderer.domElement);
+                controls.enableDamping = true;
+                controls.dampingFactor = 0.05;
+                controls.autoRotate = true;
+                controls.autoRotateSpeed = 2.0;
+                controls.enableZoom = true;
+                controls.enablePan = true;
+                controls.target.set(0, 0, 0);
+                // --- Lumières ---
+                scene.add(new THREE.AmbientLight(0x404060));
+                const light1 = new THREE.DirectionalLight(0xffffff, 1.2);
+                light1.position.set(2, 5, 3);
+                scene.add(light1);
+                const light2 = new THREE.DirectionalLight(0xffaa88, 0.8);
+                light2.position.set(-3, 2, -4);
+                scene.add(light2);
+                // --- Grille et axes ---
+                const gridHelper = new THREE.GridHelper(10, 20, 0x3b82f6, 0x1e293b);
+                scene.add(gridHelper);
+                setStatus('Chargement du modèle...', 30);
+                // --- Chargement du modèle OBJ ---
+                const loader = new THREE.OBJLoader();
+                loader.load(
+                    'SubTool-0-3517926.OBJ',
+                    (object) => {
+                        console.log('✅ Modèle chargé avec succès');
+                        // Centrer le modèle
+                        const box = new THREE.Box3().setFromObject(object);
+                        const center = box.getCenter(new THREE.Vector3());
+                        const size = box.getSize(new THREE.Vector3());
+                        object.position.set(-center.x, -center.y, -center.z);
+                        // Ajouter une couleur si le modèle n'en a pas
+                        object.traverse((child) => {
+                            if (child.isMesh) {
+                                if (!child.material) {
+                                    child.material = new THREE.MeshStandardMaterial({
+                                        color: 0x88aaff,
+                                        roughness: 0.4,
+                                        metalness: 0.2,
+                                        emissive: 0x112233
+                                    });
+                                }
+                                // Optimisation
+                                child.frustumCulled = true;
+                                child.castShadow = false;
+                                child.receiveShadow = false;
+                            }
+                        });
+                        scene.add(object);
+                        // Ajuster la caméra en fonction de la taille
+                        const maxDim = Math.max(size.x, size.y, size.z);
+                        if (maxDim > 0) {
+                            camera.position.set(maxDim * 1.5, maxDim * 0.8, maxDim * 1.5);
+                            controls.target.set(0, size.y/2, 0);
+                        }
+                        setStatus(`✅ Prêt (${size.x.toFixed(2)} x ${size.y.toFixed(2)} x ${size.z.toFixed(2)})`, 100);
+                        // Cacher la barre après 1 seconde
+                        setTimeout(() => {
+                            loadingBar.style.opacity = '0';
+                        }, 1000);
+                    },
+                    (xhr) => {
+                        if (xhr.lengthComputable) {
+                            const percent = Math.round((xhr.loaded / xhr.total) * 70) + 30; // 30-100%
+                            setStatus(`Chargement: ${Math.round((xhr.loaded / xhr.total) * 100)}%`, percent);
+                        }
+                    },
+                    (error) => {
+                        console.error('Erreur de chargement:', error);
+                        setStatus('❌ Erreur de chargement', 100);
+                        loadingBar.style.backgroundColor = '#ef4444';
+                    }
+                );
+                // --- Animation ---
+                function animate() {
+                    requestAnimationFrame(animate);
+                    controls.update();
+                    renderer.render(scene, camera);
                 }
+                animate();
+                // --- Gestion du redimensionnement ---
+                window.addEventListener('resize', () => {
+                    camera.aspect = window.innerWidth / window.innerHeight;
+                    camera.updateProjectionMatrix();
+                    renderer.setSize(window.innerWidth, window.innerHeight);
+                });
+            } catch (error) {
+                console.error('Erreur critique:', error);
+                setStatus('❌ Erreur: ' + error.message, 100);
+                loadingBar.style.backgroundColor = '#ef4444';
             }
+        })();
     </script>
 </body>
 </html>