Simulateur 3D interactif du système solaire

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Solar System Simulator</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } canvas { display: block; } #ui { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; background: rgba(20, 20, 30, 0.7); backdrop-filter: blur(10px); padding: 12px 24px; border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 100; color: #fff; } #ui label { font-size: 14px; color: #aaa; letter-spacing: 1px; } #speed-slider { width: 150px; accent-color: #4fc3f7; cursor: pointer; } #speed-value { min-width: 40px; text-align: center; font-weight: bold; color: #4fc3f7; } #pause-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 8px 20px; border-radius: 25px; cursor: pointer; font-size: 14px; transition: all 0.3s; letter-spacing: 1px; } #pause-btn:hover { background: rgba(255, 255, 255, 0.2); } #reset-btn { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 8px 20px; border-radius: 25px; cursor: pointer; font-size: 14px; transition: all 0.3s; letter-spacing: 1px; } #reset-btn:hover { background: rgba(255, 255, 255, 0.2); } #info-box { position: fixed; top: 20px; right: 20px; background: rgba(20, 20, 30, 0.7); backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; z-index: 10; min-width: 180px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } #info-box .info-title { color: #4fc3f7; font-weight: bold; margin-bottom: 5px; letter-spacing: 1px; } #info-box .info-row { display: flex; justify-content: space-between; margin: 3px 0; color: #ccc; } #info-box .info-row span:last-child { color: #fff; font-weight: 500; } #focus-label { position: fixed; top: 20px; left: 20px; background: rgba(20, 20, 30, 0.7); backdrop-filter: blur(10px); padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); color: #4fc3f7; font-size: 14px; z-index: 10; display: none; letter-spacing: 1px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); } #instructions { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 12px; letter-spacing: 1px; z-index: 5; text-align: center; background: rgba(0, 0, 0, 0.3); padding: 6px 16px; border-radius: 20px; backdrop-filter: blur(5px); } @media (max-width: 768px) { #ui { flex-wrap: wrap; width: 90%; justify-content: center; border-radius: 20px; padding: 15px; gap: 10px; } #speed-slider { width: 100px; } #instructions { display: none; } } </style> </head> <body> <div id="info-box"> <div class="label-title">SIMULATION</div> <div class="info-row"><span>Speed</span><span id="speed-display">1.0x</span></div> <div class="info-row"><span>Status</span><span id="status-display">Running</span></div> <div class="info-row"><span>Time</span><span id="time-display">0d</span></div> </div> <div id="focus-label">Focus: None</div> <div id="instructions">Drag to rotate - Scroll to zoom - Click planet to focus - Space to pause</div> <div id="ui"> <label for="speed-slider">SPEED</label> <input type="range" id="speed-slider" min="0" max="5" step="0.1" value="1"> <span id="speed-value">1.0x</span> <button id="pause-btn">PAUSE</button> <button id="reset-btn">RESET</button> </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> // ===== SCENE SETUP ===== const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 30, 60); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; document.body.appendChild(renderer.domElement); // ===== CONTROLS ===== const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 5; controls.maxDistance = 200; controls.autoRotate = false; controls.enablePan = true; // ===== LIGHTING ===== const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); const sunLight = new THREE.PointLight(0xffdd99, 2, 300); sunLight.position.set(0, 0, 0); scene.add(sunLight); // ===== STARS ===== function createStars() { const starsGeometry = new THREE.BufferGeometry(); const starsCount = 8000; const positions = new Float32Array(starsCount * 3); const colors = new Float32Array(starsCount * 3); const sizes = new Float32Array(starsCount); for (let i = 0; i < starsCount; i++) { const radius = 500 + Math.random() * 1500; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta); positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta); positions[i * 3 + 2] = radius * Math.cos(phi); const brightness = 0.5 + Math.random() * 0.5; colors[i * 3] = brightness; colors[i * 3 + 1] = brightness; colors[i * 3 + 2] = brightness; sizes[i] = 0.5 + Math.random() * 1.5; } starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); starsGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); starsGeometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1)); const starsMaterial = new THREE.PointsMaterial({ size: 1.5, vertexColors: true, transparent: true, opacity: 0.8, sizeAttenuation: true }); const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); return stars; } const stars = createStars(); // ===== SUN ===== function createSun() { const sunGeometry = new THREE.SphereGeometry(5, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa33, emissive: 0xff6600, emissiveIntensity: 1.5 }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // Glow effect const glowGeometry = new THREE.SphereGeometry(5.5, 32, 32); const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa33, transparent: true, opacity: 0.3, side: THREE.BackSide }); const glow = new THREE.Mesh(glowGeometry, glowMaterial); scene.add(glow); // Outer glow const outerGlowGeometry = new THREE.SphereGeometry(7, 32, 32); const outerGlowMaterial = new THREE.MeshBasicMaterial({ color: 0xff8800, transparent: true, opacity: 0.1, side: THREE.BackSide }); const outerGlow = new THREE.Mesh(outerGlowGeometry, outerGlowMaterial); scene.add(outerGlow); return sun; } const sun = createSun(); // ===== PLANET DATA ===== const planetData = [ { name: 'Mercury', radius: 0.4, distance: 8, color: 0x8c7e6d, speed: 4.15, icon: '☿' }, { name: 'Venus', radius: 0.9, distance: 12, color: 0xe6b800, speed: 1.62, icon: '♀' }, { name: 'Earth', radius: 1.0, distance: 16, color: 0x4a90d9, speed: 1.0, icon: '⊕' }, { name: 'Mars', radius: 0.7, distance: 20, color: 0xc1440e, speed: 0.53, icon: '♂' }, { name: 'Jupiter', radius: 2.5, distance: 28, color: 0xd4a574, speed: 0.084, icon: '♃' }, { name: 'Saturn', radius: 2.1, distance: 36, color: 0xe8cda0, speed: 0.034, icon: '♄' }, { name: 'Uranus', radius: 1.5, distance: 44, color: 0x7ec8e3, speed: 0.012, icon: '♅' }, { name: 'Neptune', radius: 1.4, distance: 52, color: 0x3b5eab, speed: 0.006, icon: '♆' } ]; // ===== CREATE PLANETS ===== const planets = []; const orbitLines = []; const labels = []; function createPlanet(data) { const group = new THREE.Group(); group.position.x = data.distance; // Planet mesh const geometry = new THREE.SphereGeometry(data.radius, 32, 32); const material = new THREE.MeshPhongMaterial({ color: data.color, shininess: 30, specular: 0x222222 }); const mesh = new THREE.Mesh(geometry, material); mesh.castShadow = true; mesh.receiveShadow = true; group.add(mesh); // Saturn rings if (data.name === 'Saturn') { const ringGeometry = new THREE.RingGeometry(data.radius * 1.4, data.radius * 2.2, 32); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xc8b89a, side: THREE.DoubleSide, transparent: true, opacity: 0.7 }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; group.add(ring); } // Orbit line const orbitGeometry = new THREE.BufferGeometry(); const orbitPoints = []; for (let i = 0; i <= 128; i++) { const angle = (i / 128) * Math.PI * 2; orbitPoints.push(Math.cos(angle) * data.distance, 0, Math.sin(angle) * data.distance); } orbitGeometry.setAttribute('position', new THREE.Float32BufferAttribute(orbitPoints, 3)); const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.15 }); const orbitLine = new THREE.Line(orbitGeometry, orbitMaterial); scene.add(orbitLine); orbitLines.push(orbitLine); // Label const labelDiv = document.createElement('div'); labelDiv.className = 'planet-label'; labelDiv.innerHTML = `<span style="font-size:16px;margin-right:4px;">${data.icon}</span>${data.name}`; labelDiv.style.cssText = ` position: fixed; color: #fff; font-size: 12px; font-weight: 500; letter-spacing: 1px; text-shadow: 0 0 10px rgba(0,0,0,0.8); pointer-events: none; z-index: 5; background: rgba(0,0,0,0.4); padding: 3px 8px; border-radius: 10px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); white-space: nowrap; transform: translate(-50%, -50%); `; document.body.appendChild(labelDiv); labels.push({ div: labelDiv, planet: group, name: data.name }); // Store data const planetObj = { group: group, mesh: mesh, data: data, angle: Math.random() * Math.PI * 2, label: labelDiv }; scene.add(group); planets.push(planetObj); return planetObj; } planetData.forEach(data => createPlanet(data)); // ===== CLICK TO FOCUS ===== const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let focusedPlanet = null; let isFocusing = false; renderer.domElement.addEventListener('click', (event) => { mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); const planetMeshes = planets.map(p => p.mesh); const intersects = raycaster.intersectObjects(planetMeshes); if (intersects.length > 0) { const clickedMesh = intersects[0].object; const planet = planets.find(p => p.mesh === clickedMesh); if (planet) { focusOnPlanet(planet); } } else { // Check if clicked on sun const sunIntersects = raycaster.intersectObject(sun); if (sunIntersects.length > 0) { resetView(); } } }); function focusOnPlanet(planet) { focusedPlanet = planet; isFocusing = true; document.getElementById('focus-label').style.display = 'block'; document.getElementById('focus-label').textContent = `Focus: ${planet.data.name}`; controls.target.copy(planet.group.position); controls.update(); } function resetView() { focusedPlanet = null; isFocusing = false; document.getElementById('focus-label').style.display = 'none'; camera.position.set(0, 30, 60); controls.target.set(0, 0, 0); controls.update(); } // ===== UI CONTROLS ===== let speedMultiplier = 1.0; let isPaused = false; let simulationTime = 0; const speedSlider = document.getElementById('speed-slider'); const speedValue = document.getElementById('speed-value'); const speedDisplay = document.getElementById('speed-display'); const pauseBtn = document.getElementById('pause-btn'); const resetBtn = document.getElementById('reset-btn'); const statusDisplay = document.getElementById('status-display'); const timeDisplay = document.getElementById('time-display'); speedSlider.addEventListener('input', (e) => { speedMultiplier = parseFloat(e.target.value); speedValue.textContent = speedMultiplier.toFixed(1) + 'x'; speedDisplay.textContent = speedMultiplier.toFixed(1) + 'x'; }); pauseBtn.addEventListener('click', () => { isPaused = !isPaused; pauseBtn.textContent = isPaused ? 'RESUME' : 'PAUSE'; statusDisplay.textContent = isPaused ? 'Paused' : 'Running'; }); resetBtn.addEventListener('click', () => { resetView(); speedSlider.value = 1; speedMultiplier = 1.0; speedValue.textContent = '1.0x'; speedDisplay.textContent = '1.0x'; isPaused = false; pauseBtn.textContent = 'PAUSE'; statusDisplay.textContent = 'Running'; }); // Keyboard shortcut document.addEventListener('keydown', (e) => { if (e.code === 'Space') { e.preventDefault(); pauseBtn.click(); } }); // ===== ANIMATION LOOP ===== const clock = new THREE.Clock(); let elapsedTime = 0; let dayCounter = 0; function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); elapsed += delta; if (!isPaused) { // Update simulation time simulationTime += delta * speedMultiplier; dayCounter = Math.floor(simulationTime * 365); // 1 second = 1 year at 1x timeDisplay.textContent = dayCounter + 'd'; // Update planet positions planets.forEach(planet => { const speed = planet.data.speed * speedMultiplier * 0.1; planet.angle += speed * delta; planet.group.position.x = Math.cos(planet.angle) * planet.data.distance; planet.group.position.z = Math.sin(planet.angle) * planet.data.distance; // Rotate planet on its axis planet.mesh.rotation.y += delta * speedMultiplier * 0.5; }); // Twinkle stars stars.rotation.y += delta * 0.005; } // Update labels planets.forEach(planet => { const vector = planet.group.position.clone(); vector.project(camera); const x = (vector.x * 0.5 + 0.5) * window.innerWidth; const y = (-(vector.y * 0.5) + 0.5) * window.innerHeight; planet.label.style.left = x + 'px'; planet.label.style.top = (y - 20) + 'px'; planet.label.style.display = vector.z < 1 ? 'block' : 'none'; }); // Focus camera on planet if focusing if (isFocusing && focusedPlanet) { controls.target.lerp(focusedPlanet.group.position, 0.1); controls.update(); } // Sun glow pulse const pulse = 1 + Math.sin(elapsed * 2) * 0.05; sun.scale.set(pulse, pulse, pulse); controls.update(); renderer.render(scene, camera); } // ===== RESIZE ===== window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // ===== START ===== animate(); </script> </body> </html>