Spaces:

yaspred
/

systeme-solaire

Running

App Files Files Community

yaspred commited on Apr 5, 2025

Commit

df4cd70

verified ·

1 Parent(s): 99d0393

Add 1 files

Browse files

Files changed (1) hide show

index.html +131 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Système Solaire 3D</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
@@ -79,6 +79,15 @@
             backdrop-filter: blur(5px);
             display: none;
         }
     </style>
 </head>
 <body>
@@ -102,6 +111,9 @@
             <button id="toggleLabels" class="bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded text-sm transition">
                 Masquer les labels
             </button>
         </div>
     </div>
@@ -377,11 +389,77 @@
             labels.push({ element: label, planet: planet });
         });
         // Contrôles UI
         const speedControl = document.getElementById('speedControl');
         const speedValue = document.getElementById('speedValue');
         const toggleOrbits = document.getElementById('toggleOrbits');
         const toggleLabels = document.getElementById('toggleLabels');
         const planetInfo = document.getElementById('planetInfo');
         const planetName = document.getElementById('planetName');
         const planetDistance = document.getElementById('planetDistance');
@@ -390,6 +468,7 @@
         let showOrbits = true;
         let showLabels = true;
         let speedFactor = 1;
         speedControl.addEventListener('input', (e) => {
@@ -408,11 +487,21 @@
         toggleLabels.addEventListener('click', () => {
             showLabels = !showLabels;
             labels.forEach(label => label.element.style.display = showLabels ? 'block' : 'none');
             toggleLabels.textContent = showLabels ? 'Masquer les labels' : 'Afficher les labels';
             toggleLabels.classList.toggle('bg-purple-600');
             toggleLabels.classList.toggle('bg-gray-600');
         });
         // Gestion des clics sur les planètes
         window.addEventListener('click', (event) => {
             // Calcul de la position de la souris en coordonnées normalisées
@@ -468,6 +557,12 @@
                 const y = (-(screenPosition.y * 0.5 + 0.5) + 1) * window.innerHeight;
                 label.element.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
             });
             // Animation du soleil
             sun.rotation.y += 0.002 * speedFactor;
@@ -486,6 +581,41 @@
                     particle.position.normalize().multiplyScalar(5 + Math.random() * 2);
                 }
             });
             controls.update();
             renderer.render(scene, camera);

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Système Solaire 3D avec Comète</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/build/three.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
             backdrop-filter: blur(5px);
             display: none;
         }
+        .comet-label {
+            position: absolute;
+            color: #aaf;
+            font-size: 12px;
+            pointer-events: none;
+            text-shadow: 0 0 3px black;
+            white-space: nowrap;
+            transform: translate(-50%, -50%);
+        }
     </style>
 </head>
 <body>
             <button id="toggleLabels" class="bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded text-sm transition">
                 Masquer les labels
             </button>
+            <button id="toggleComet" class="bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm transition">
+                Masquer la comète
+            </button>
         </div>
     </div>
             labels.push({ element: label, planet: planet });
         });
+        // Création de la comète
+        function createComet() {
+            // Noyau de la comète
+            const cometGeometry = new THREE.SphereGeometry(0.3, 16, 16);
+            const cometMaterial = new THREE.MeshPhongMaterial({
+                color: 0x88ccff,
+                emissive: 0x88ccff,
+                emissiveIntensity: 0.5
+            });
+            const comet = new THREE.Mesh(cometGeometry, cometMaterial);
+            // Queue de la comète (particules)
+            const tailParticles = new THREE.BufferGeometry();
+            const tailMaterial = new THREE.PointsMaterial({
+                color: 0x88ffff,
+                size: 0.1,
+                transparent: true,
+                opacity: 0.8,
+                blending: THREE.AdditiveBlending
+            });
+            const tailVertices = [];
+            for (let i = 0; i < 100; i++) {
+                // Position aléatoire derrière la comète
+                const x = -Math.random() * 5;
+                const y = (Math.random() - 0.5) * 0.5;
+                const z = (Math.random() - 0.5) * 0.5;
+                tailVertices.push(x, y, z);
+            }
+            tailParticles.setAttribute('position', new THREE.Float32BufferAttribute(tailVertices, 3));
+            const tail = new THREE.Points(tailParticles, tailMaterial);
+            comet.add(tail);
+            // Position initiale aléatoire
+            const angle = Math.random() * Math.PI * 2;
+            const distance = 150 + Math.random() * 50;
+            comet.position.x = Math.cos(angle) * distance;
+            comet.position.z = Math.sin(angle) * distance;
+            comet.position.y = (Math.random() - 0.5) * 30;
+            // Vitesse et direction aléatoires
+            const velocity = new THREE.Vector3(
+                (Math.random() - 0.5) * 0.5,
+                (Math.random() - 0.5) * 0.2,
+                (Math.random() - 0.5) * 0.5
+            );
+            // Label pour la comète
+            const label = document.createElement('div');
+            label.className = 'comet-label';
+            label.textContent = 'Comète';
+            document.body.appendChild(label);
+            return {
+                mesh: comet,
+                velocity: velocity,
+                label: label,
+                tail: tail
+            };
+        }
+        const comet = createComet();
+        scene.add(comet.mesh);
         // Contrôles UI
         const speedControl = document.getElementById('speedControl');
         const speedValue = document.getElementById('speedValue');
         const toggleOrbits = document.getElementById('toggleOrbits');
         const toggleLabels = document.getElementById('toggleLabels');
+        const toggleComet = document.getElementById('toggleComet');
         const planetInfo = document.getElementById('planetInfo');
         const planetName = document.getElementById('planetName');
         const planetDistance = document.getElementById('planetDistance');
         let showOrbits = true;
         let showLabels = true;
+        let showComet = true;
         let speedFactor = 1;
         speedControl.addEventListener('input', (e) => {
         toggleLabels.addEventListener('click', () => {
             showLabels = !showLabels;
             labels.forEach(label => label.element.style.display = showLabels ? 'block' : 'none');
+            comet.label.style.display = showLabels ? 'block' : 'none';
             toggleLabels.textContent = showLabels ? 'Masquer les labels' : 'Afficher les labels';
             toggleLabels.classList.toggle('bg-purple-600');
             toggleLabels.classList.toggle('bg-gray-600');
         });
+        toggleComet.addEventListener('click', () => {
+            showComet = !showComet;
+            comet.mesh.visible = showComet;
+            comet.label.style.display = showComet && showLabels ? 'block' : 'none';
+            toggleComet.textContent = showComet ? 'Masquer la comète' : 'Afficher la comète';
+            toggleComet.classList.toggle('bg-green-600');
+            toggleComet.classList.toggle('bg-gray-600');
+        });
         // Gestion des clics sur les planètes
         window.addEventListener('click', (event) => {
             // Calcul de la position de la souris en coordonnées normalisées
                 const y = (-(screenPosition.y * 0.5 + 0.5) + 1) * window.innerHeight;
                 label.element.style.transform = `translate(-50%, -50%) translate(${x}px,${y}px)`;
             });
+            // Mise à jour du label de la comète
+            const cometScreenPos = comet.mesh.position.clone().project(camera);
+            const cometX = (cometScreenPos.x * 0.5 + 0.5) * window.innerWidth;
+            const cometY = (-(cometScreenPos.y * 0.5 + 0.5) + 1) * window.innerHeight;
+            comet.label.style.transform = `translate(-50%, -50%) translate(${cometX}px,${cometY}px)`;
             // Animation du soleil
             sun.rotation.y += 0.002 * speedFactor;
                     particle.position.normalize().multiplyScalar(5 + Math.random() * 2);
                 }
             });
+            // Animation de la comète
+            comet.mesh.position.x += comet.velocity.x * speedFactor;
+            comet.mesh.position.y += comet.velocity.y * speedFactor;
+            comet.mesh.position.z += comet.velocity.z * speedFactor;
+            // Faire tourner la queue de la comète
+            comet.tail.rotation.y += 0.01 * speedFactor;
+            // Si la comète sort de la scène, la repositionner de l'autre côté
+            if (Math.abs(comet.mesh.position.x) > 200 ||
+                Math.abs(comet.mesh.position.y) > 100 ||
+                Math.abs(comet.mesh.position.z) > 200) {
+                // Nouvelle position aléatoire
+                const angle = Math.random() * Math.PI * 2;
+                const distance = 150 + Math.random() * 50;
+                comet.mesh.position.x = Math.cos(angle) * distance;
+                comet.mesh.position.z = Math.sin(angle) * distance;
+                comet.mesh.position.y = (Math.random() - 0.5) * 30;
+                // Nouvelle direction
+                comet.velocity.set(
+                    (Math.random() - 0.5) * 0.5,
+                    (Math.random() - 0.5) * 0.2,
+                    (Math.random() - 0.5) * 0.5
+                );
+            }
+            // Orientation de la comète vers sa direction de mouvement
+            comet.mesh.lookAt(
+                comet.mesh.position.x + comet.velocity.x,
+                comet.mesh.position.y + comet.velocity.y,
+                comet.mesh.position.z + comet.velocity.z
+            );
             controls.update();
             renderer.render(scene, camera);