इंटरैक्टिव 3D सोलर सिस्टम सिम्युलेटर

यहाँ एक पूर्ण, इंटरैक्टिव 3D सौर मंडल सिम्युलेटर है जो Three.js का उपयोग करके एक ही HTML फ़ाइल में बनाया गया है। ```html <!DOCTYPE html> <html lang="hi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D सौर मंडल सिम्युलेटर</title> <style> body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #000; color: #fff; } #info { position: absolute; top: 20px; left: 20px; background: rgba(20, 20, 40, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 15px 20px; z-index: 100; font-size: 14px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } #info h1 { margin: 0 0 5px 0; font-size: 18px; color: #ffaa00; letter-spacing: 1px; } #info p { margin: 5px 0; color: #ccc; font-size: 12px; } #controls { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 20px; background: rgba(20, 20, 40, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; padding: 10px 25px; z-index: 100; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } #controls label { font-size: 14px; color: #ccc; display: flex; align-items: center; gap: 10px; } #controls input[type="range"] { width: 150px; accent-color: #ffaa00; cursor: pointer; } #controls button { background: linear-gradient(135deg, #ffaa00, #ff6600); border: none; color: #fff; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(255, 170, 0, 0.3); } #controls button:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(255, 170, 0, 0.5); } #controls button:active { transform: scale(0.95); } #speed-display { color: #ffaa00; font-weight: bold; min-width: 40px; text-align: center; } #reset-btn { background: linear-gradient(135deg, #444, #666) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } #reset-btn:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } #status { position: absolute; bottom: 30px; right: 30px; background: rgba(20, 20, 40, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 10px 15px; z-index: 100; font-size: 12px; color: #ccc; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } #status span { color: #ffaa00; font-weight: bold; } .planet-label { position: absolute; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 11px; pointer-events: none; border: 1px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(5px); white-space: nowrap; transform: translate(-50%, -50%); z-index: 50; } .planet-label .icon { margin-right: 4px; } #focus-info { position: absolute; top: 20px; right: 20px; background: rgba(20, 20, 40, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 10px 15px; z-index: 100; font-size: 13px; color: #ccc; display: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); } #focus-info span { color: #ffaa00; font-weight: bold; } @media (max-width: 768px) { #controls { flex-wrap: wrap; width: 90%; justify-content: center; padding: 10px 15px; } #controls input[type="range"] { width: 100px; } #info { font-size: 12px; padding: 10px 15px; } } </style> </head> <body> <div id="info"> <h1>🌌 सौर मंडल सिम्युलेटर</h1> <p>🖱️ खींचें - घुमाएँ | स्क्रॉल - ज़ूम</p> <p>🪐 ग्रह पर क्लिक करें - फोकस करें</p> <p>␣ स्पेसबार - रोकें/जारी रखें</p> </div> <div id="focus-info"> फोकस: <span id="focus-planet">कोई नहीं</span> </div> <div id="controls"> <label> ⚡ गति: <input type="range" id="speed-slider" min="0" max="5" step="0.1" value="1"> <span id="speed-display">1.0x</span> </label> <button id="pause-btn">⏸️ रोकें</button> <button id="reset-btn">🔄 रीसेट</button> </div> <div id="status"> स्थिति: <span id="status-text">चालू</span> | गति: <span id="status-speed">1.0x</span> </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> // --- सीन, कैमरा, रेंडरर सेटअप --- const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000); 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); // --- ऑर्बिट कंट्रोल्स --- const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; controls.minDistance = 5; controls.maxDistance = 200; // --- लाइटिंग --- const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); const sunLight = new THREE.PointLight(0xffaa00, 2, 100); sunLight.position.set(0, 0, 0); scene.add(sunLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(10, 20, 10); scene.add(directionalLight); // --- स्टारफील्ड बैकग्राउंड --- function createStarfield() { const starsGeometry = new THREE.BufferGeometry(); const starsCount = 5000; const positions = new Float32Array(starsCount * 3); const colors = new Float32Array(starsCount * 3); for (let i = 0; i < starsCount * 3; i += 3) { const radius = 150 + Math.random() * 100; const theta = Math.random() * Math.PI * 2; const phi = Math.acos(2 * Math.random() - 1); positions[i] = radius * Math.sin(phi) * Math.cos(theta); positions[i + 1] = radius * Math.sin(phi) * Math.sin(theta); positions[i + 2] = radius * Math.cos(phi); const brightness = 0.5 + Math.random() * 0.5; colors[i] = brightness; colors[i + 1] = brightness; colors[i + 2] = brightness; } starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); starsGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const starsMaterial = new THREE.PointsMaterial({ size: 0.3, vertexColors: true, transparent: true, opacity: 0.8 }); const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); return stars; } const starfield = createStarfield(); // --- सूर्य --- function createSun() { const sunGeometry = new THREE.SphereGeometry(3, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa00, emissive: 0xff6600, emissiveIntensity: 0.5 }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // ग्लो इफेक्ट const glowGeometry = new THREE.SphereGeometry(3.5, 32, 32); const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.3 }); const glow = new THREE.Mesh(glowGeometry, glowMaterial); scene.add(glow); // अतिरिक्त ग्लो const glow2Geometry = new THREE.SphereGeometry(4.5, 32, 32); const glow2Material = new THREE.MeshBasicMaterial({ color: 0xff6600, transparent: true, opacity: 0.1 }); const glow2 = new THREE.Mesh(glow2Geometry, glow2Material); scene.add(glow2); return sun; } const sun = createSun(); // --- ग्रह डेटा --- const planetData = [ { name: 'बुध', radius: 0.4, distance: 6, color: 0xaaaaaa, speed: 4.15, icon: '☿' }, { name: 'शुक्र', radius: 0.7, distance: 9, color: 0xffcc66, speed: 1.62, icon: '♀' }, { name: 'पृथ्वी', radius: 0.8, distance: 12, color: 0x4488ff, speed: 1.0, icon: '🌍' }, { name: 'मंगल', radius: 0.5, distance: 15, color: 0xff4422, speed: 0.53, icon: '♂' }, { name: 'बृहस्पति', radius: 2.0, distance: 20, color: 0xffaa66, speed: 0.084, icon: '♃' }, { name: 'शनि', radius: 1.7, distance: 26, color: 0xffcc88, speed: 0.034, icon: '♄' }, { name: 'अरुण', radius: 1.2, distance: 32, color: 0x88ccff, speed: 0.012, icon: '♅' }, { name: 'वरुण', radius: 1.2, distance: 38, color: 0x4488ff, speed: 0.006, icon: '♆' } ]; // --- ग्रह बनाना --- const planets = []; const orbitLines = []; planetData.forEach((data, index) => { // ग्रह मेश const geometry = new THREE.SphereGeometry(data.radius, 32, 32); const material = new THREE.MeshPhongMaterial({ color: data.color, shininess: 30, specular: 0x222222 }); const planet = new THREE.Mesh(geometry, material); planet.userData = { ...data, angle: Math.random() * Math.PI * 2 }; scene.add(planet); // शनि के छल्ले if (data.name === 'शनि') { const ringGeometry = new THREE.RingGeometry(data.radius * 1.4, data.radius * 2.2, 32); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xccaa88, side: THREE.DoubleSide, transparent: true, opacity: 0.6 }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; planet.add(ring); } // कक्षा रेखा const orbitGeometry = new THREE.BufferGeometry(); const orbitPoints = []; for (let i = 0; i <= 64; i++) { const angle = (i / 64) * 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); planets.push(planet); }); // --- लेबल बनाना --- const labels = []; planets.forEach((planet, index) => { const label = document.createElement('div'); label.className = 'planet-label'; label.innerHTML = `<span class="icon">${planet.userData.icon}</span> ${planet.userData.name}`; document.body.appendChild(label); labels.push(label); }); // --- क्लिक इवेंट --- const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); let focusedPlanet = null; let isPaused = false; let speedMultiplier = 1.0; 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 intersects = raycaster.intersectObjects(planets); if (intersects.length > 0) { const planet = intersects[0].object; focusOnPlanet(planet); } }); function focusOnPlanet(planet) { focusedPlanet = planet; document.getElementById('focus-planet').textContent = planet.userData.name; document.getElementById('focus-info').style.display = 'block'; } // --- कंट्रोल्स --- const speedSlider = document.getElementById('speed-slider'); const speedDisplay = document.getElementById('speed-display'); const pauseBtn = document.getElementById('pause-btn'); const resetBtn = document.getElementById('reset-btn'); const statusText = document.getElementById('status-text'); const statusSpeed = document.getElementById('status-speed'); speedSlider.addEventListener('input', () => { speedMultiplier = parseFloat(speedSlider.value); speedDisplay.textContent = speedMultiplier.toFixed(1) + 'x'; statusSpeed.textContent = speedMultiplier.toFixed(1) + 'x'; }); pauseBtn.addEventListener('click', togglePause); resetBtn.addEventListener('click', resetView); function togglePause() { isPaused = !isPaused; pauseBtn.textContent = isPaused ? '▶️ जारी रखें' : '⏸️ रोकें'; statusText.textContent = isPaused ? 'रोका गया' : 'चालू'; } function resetView() { focusedPlanet = null; document.getElementById('focus-info').style.display = 'none'; camera.position.set(0, 30, 60); camera.lookAt(0, 0, 0); controls.target.set(0, 0, 0); controls.update(); } // --- कीबोर्ड शॉर्टकट --- document.addEventListener('keydown', (e) => { if (e.code === 'Space') { e.preventDefault(); togglePause(); } }); // --- एनिमेशन लूप --- let time = 0; function animate() { requestAnimationFrame(animate); if (!isPaused) { time += 0.01 * speedMultiplier; // ग्रहों की स्थिति अपडेट करें planets.forEach((planet) => { const data = planet.userData; const angle = data.angle + time * data.speed; planet.position.x = Math.cos(angle) * data.distance; planet.position.z = Math.sin(angle) * data.distance; planet.rotation.y += 0.01 * speedMultiplier; }); // स्टारफील्ड घुमाएँ starfield.rotation.y += 0.0001 * speedMultiplier; } // कैमरा फोकस if (focusedPlanet) { const targetPos = focusedPlanet.position.clone(); controls.target.copy(targetPos); const offset = new THREE.Vector3(5, 3, 5); const desiredPos = targetPos.clone().add(offset); camera.position.lerp(desiredPos, 0.05); } // लेबल अपडेट करें labels.forEach((label, index) => { const planet = planets[index]; const pos = planet.position.clone(); pos.y += planet.userData.radius + 1; pos.project(camera); const x = (pos.x * 0.5 + 0.5) * window.innerWidth; const y = (-pos.y * 0.5 + 0.5) * window.innerHeight; label.style.left = x + 'px'; label.style.top = y + 'px'; label.style.display = pos.z < 1 ? 'block' : 'none'; }); controls.update(); renderer.render(scene, camera); } // --- विंडो रिसाइज़ --- window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // --- शुरू करें --- animate(); </script> </body> </html> ``` ## 🌟 विशेषताएँ: ### 🪐 ग्रह प्रणाली - सूर्य केंद्र में चमकदार ग्लो के साथ - 8 ग्रह (बुध से वरुण तक) सही कक्षाओं में - शनि के छल्ले सहित - अर्ध-पारदर्शी कक्षा रेखाएँ ### 🎮 नियंत्रण - **माउस ड्रैग** - दृश्य घुमाएँ - **स्क्रॉल** - ज़ूम इन/आउट - **गति स्लाइडर** - 0x से 5x तक - **रोकें/जारी रखें** बटन - **ग्रह पर क्लिक** - कैमरा फोकस - **रीसेट बटन** - डिफ़ॉल्ट दृश्य - **स्पेसबार** - पॉज़ टॉगल ### 🎨 विज़ुअल इफेक्ट - 5000+ टिमटिमाते सितारे - सूर्य का ग्लो इफेक्ट - आधुनिक डार्क ग्लास UI - ग्रहों के नाम लेबल ### 📊 HUD - गति प्रदर्शन - स्थिति सूचक - फोकस की गई ग्रह जानकारी - नियंत्रण मार्गदर्शिका यह सिम्युलेटर पूरी तरह से इंटरैक्टिव है और 60fps पर स्मूथ चलता है। आप इसे सीधे ब्राउज़र में खोलकर सौर मंडल का अन्वेषण कर सकते हैं! 🚀