Enhanced 3D Solar System

Loading Solar System

SOLAR SYSTEM

Sun

The star at the center of our solar system.

Diameter: 1,392,700 km

Distance from Sun: 0 km

Orbital Period: N/A

import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js'; import { LuminosityShader } from 'three/addons/shaders/LuminosityShader.js'; import { OutputPass } from 'three/addons/postprocessing/OutputPass.js'; import { FilmPass } from 'three/addons/postprocessing/FilmPass.js'; import { Stats } from 'three/addons/libs/stats.module.js'; // Loading manager for assets const loadingManager = new THREE.LoadingManager(); let loadingProgress = 0; const totalAssets = 10; // Approximate count for progress calculation // Update loading progress function updateProgress() { loadingProgress++; const percent = Math.min(Math.floor((loadingProgress / totalAssets) * 100), 100); document.getElementById('loading-progress').style.width = `${percent}%`; if (loadingProgress >= totalAssets) { setTimeout(() => { document.getElementById('loading').classList.add('hidden'); }, 500); } } // Scene setup const scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); scene.fog = new THREE.FogExp2(0x000000, 0.0005); // Camera const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 200, 500); // Renderer with better antialiasing const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.5; document.body.appendChild(renderer.domElement); updateProgress(); // Post-processing pipeline const renderScene = new RenderPass(scene, camera); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 1.2, // strength 0.4, // radius 0.8 // threshold ); const filmPass = new FilmPass( 0.15, // noise intensity 0.025, // scanline intensity 648, // scanline count false // grayscale ); const outputPass = new OutputPass(); const composer = new EffectComposer(renderer); composer.addPass(renderScene); composer.addPass(bloomPass); composer.addPass(filmPass); composer.addPass(outputPass); updateProgress(); // Controls with smooth damping const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.1; controls.minDistance = 50; controls.maxDistance = 2000; controls.maxPolarAngle = Math.PI * 0.9; controls.screenSpacePanning = false; controls.autoRotate = false; controls.autoRotateSpeed = 0.5; // Lighting const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); updateProgress(); // Sun light with god rays effect const sunLight = new THREE.PointLight(0xffaa33, 2, 1000, 2); sunLight.position.set(0, 0, 0); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 0.5; sunLight.shadow.camera.far = 1000; scene.add(sunLight); updateProgress(); // Enhanced starfield with different sizes and colors const starGeometry = new THREE.BufferGeometry(); const starMaterial = new THREE.PointsMaterial({ size: 0.5, sizeAttenuation: true, transparent: true, opacity: 0.8, vertexColors: true }); const starVertices = []; const starColors = []; const starSizes = []; for (let i = 0; i < 20000; i++) { // Position const x = (Math.random() - 0.5) * 3000; const y = (Math.random() - 0.5) * 3000; const z = (Math.random() - 0.5) * 3000; starVertices.push(x, y, z); // Color - some stars have slight color variations const color = new THREE.Color( Math.random() * 0.2 + 0.8, Math.random() * 0.2 + 0.8, Math.random() * 0.2 + 0.8 ); starColors.push(color.r, color.g, color.b); // Size variation starSizes.push(Math.random() * 1.5 + 0.5); } starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); starGeometry.setAttribute('color', new THREE.Float32BufferAttribute(starColors, 3)); starGeometry.setAttribute('size', new THREE.Float32BufferAttribute(starSizes, 1)); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); updateProgress(); // Galaxy background const galaxyGeometry = new THREE.BufferGeometry(); const galaxyMaterial = new THREE.PointsMaterial({ size: 2, sizeAttenuation: true, transparent: true, opacity: 0.3, color: 0x4488ff, blending: THREE.AdditiveBlending }); const galaxyVertices = []; for (let i = 0; i < 5000; i++) { // Spiral galaxy pattern const radius = Math.random() * 500 + 100; const angle = Math.random() * Math.PI * 2; const spiral = Math.random() * 0.2; const x = Math.cos(angle + radius * spiral) * radius; const y = (Math.random() - 0.5) * 50; const z = Math.sin(angle + radius * spiral) * radius; galaxyVertices.push(x, y, z); } galaxyGeometry.setAttribute('position', new THREE.Float32BufferAttribute(galaxyVertices, 3)); const galaxy = new THREE.Points(galaxyGeometry, galaxyMaterial); galaxy.position.set(500, 0, -500); scene.add(galaxy); updateProgress(); // Planet data with more realistic properties const planets = [ { name: 'Sun', size: 40, color: 0xffdd77, emissive: 0xffaa33, orbitRadius: 0, orbitSpeed: 0, rotationSpeed: 0.002, info: { diameter: '1,392,700 km', distance: '0 km', period: 'N/A', description: 'The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, heated to incandescence by nuclear fusion reactions in its core.' } }, { name: 'Mercury', size: 3.2, color: 0xbbbbbb, orbitRadius: 60, orbitSpeed: 1.6, rotationSpeed: 0.004, info: { diameter: '4,880 km', distance: '57.9 million km', period: '88 days', description: 'Mercury is the smallest and innermost planet in the Solar System. Its orbit around the Sun takes 87.97 Earth days, the shortest of all the planets.' } }, { name: 'Venus', size: 6, color: 0xe6a760, orbitRadius: 85, orbitSpeed: 1.17, rotationSpeed: 0.002, info: { diameter: '12,104 km', distance: '108.2 million km', period: '225 days', description: 'Venus is the second planet from the Sun. It is named after the Roman goddess of love and beauty. Venus orbits the Sun every 224.7 Earth days.' } }, { name: 'Earth', size: 6.3, color: 0x6b93d6, orbitRadius: 120, orbitSpeed: 1, rotationSpeed: 0.02, info: { diameter: '12,742 km', distance: '149.6 million km', period: '365.25 days', description: 'Earth is the third planet from the Sun and the only astronomical object known to harbor life. About 29% of Earth\'s surface is land consisting of continents and islands.' } }, { name: 'Mars', size: 3.4, color: 0xd5704e, orbitRadius: 180, orbitSpeed: 0.8, rotationSpeed: 0.018, info: { diameter: '6,779 km', distance: '227.9 million km', period: '687 days', description: 'Mars is the fourth planet from the Sun and the second-smallest planet in the Solar System. Mars carries the name of the Roman god of war and is often referred to as the "Red Planet".' } }, { name: 'Jupiter', size: 22, color: 0xe0be95, orbitRadius: 250, orbitSpeed: 0.43, rotationSpeed: 0.04, info: { diameter: '139,820 km', distance: '778.5 million km', period: '12 years', description: 'Jupiter is the fifth planet from the Sun and the largest in the Solar System. It is a gas giant with a mass one-thousandth that of the Sun.' } }, { name: 'Saturn', size: 18.5, color: 0xe0d7a4, orbitRadius: 320, orbitSpeed: 0.32, rotationSpeed: 0.038, hasRing: true, info: { diameter: '116,460 km', distance: '1.4 billion km', period: '29.5 years', description: 'Saturn is the sixth planet from the Sun and the second-largest in the Solar System, after Jupiter. It is a gas giant with an average radius about nine times that of Earth.' } }, { name: 'Uranus', size: 8, color: 0xa5f2f3, orbitRadius: 390, orbitSpeed: 0.23, rotationSpeed: 0.03, info: { diameter: '50,724 km', distance: '2.9 billion km', period: '84 years', description: 'Uranus is the seventh planet from the Sun. It has the third-largest planetary radius and fourth-largest planetary mass in the Solar System.' } }, { name: 'Neptune', size: 7.7, color: 0x517cff, orbitRadius: 460, orbitSpeed: 0.18, rotationSpeed: 0.031, info: { diameter: '49,244 km', distance: '4.5 billion km', period: '165 years', description: 'Neptune is the eighth and farthest known planet from the Sun in the Solar System. In the Solar System, it is the fourth-largest planet by diameter.' } }, ]; // Create planets with enhanced materials const planetObjects = []; const orbitPaths = []; planets.forEach((planet, index) => { // Create planet geometry const geometry = new THREE.SphereGeometry(planet.size, 64, 64); // Enhanced material with bump mapping let material; if (planet.emissive) { material = new THREE.MeshStandardMaterial({ color: planet.color, emissive: planet.emissive, emissiveIntensity: 2, roughness: 0.7, metalness: 0.1 }); } else { material = new THREE.MeshStandardMaterial({ color: planet.color, roughness: 0.8, metalness: 0.1, bumpScale: 0.005 }); } // Create mesh const mesh = new THREE.Mesh(geometry, material); mesh.name = planet.name; mesh.castShadow = true; mesh.receiveShadow = true; if (planet.orbitRadius > 0) { // Position planets around the sun const planetOrbitAngle = Math.random() * Math.PI * 2; mesh.position.x = Math.cos(planetOrbitAngle) * planet.orbitRadius; mesh.position.z = Math.sin(planetOrbitAngle) * planet.orbitRadius; // Create orbit path const orbitGeometry = new THREE.BufferGeometry(); const orbitPoints = []; const segments = 128; for (let i = 0; i <= segments; i++) { const angle = (i / segments) * Math.PI * 2; orbitPoints.push( Math.cos(angle) * planet.orbitRadius, 0, Math.sin(angle) * planet.orbitRadius ); } orbitGeometry.setAttribute('position', new THREE.Float32BufferAttribute(orbitPoints, 3)); const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xaaaaaa, transparent: true, opacity: 0.3, linewidth: 1 }); const orbit = new THREE.Line(orbitGeometry, orbitMaterial); orbit.rotation.x = Math.PI / 2; orbit.userData.isOrbit = true; scene.add(orbit); orbitPaths.push(orbit); } scene.add(mesh); planetObjects.push({ mesh, orbitSpeed: planet.orbitSpeed, rotationSpeed: planet.rotationSpeed, orbitRadius: planet.orbitRadius, data: planet.info }); // Create ring for Saturn if (planet.hasRing) { const ringGeometry = new THREE.RingGeometry(planet.size + 5, planet.size + 12, 64); const ringMaterial = new THREE.MeshStandardMaterial({ color: 0xe0d7a4, side: THREE.DoubleSide, roughness: 0.8, metalness: 0.2, transparent: true, opacity: 0.7 }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 3; mesh.add(ring); } // Create planet button in UI const planetBtn = document.createElement('div'); planetBtn.className = 'planet-btn'; planetBtn.style.background = `#${planet.color.toString(16)}`; planetBtn.textContent = planet.name[0]; planetBtn.dataset.planetIndex = index; document.getElementById('planet-selector').appendChild(planetBtn); }); updateProgress(); // Enhanced asteroid belt with particles const asteroidCount = 2000; const asteroidGeometry = new THREE.BufferGeometry(); const asteroidMaterial = new THREE.PointsMaterial({ size: 0.8, color: 0x888888, transparent: true, opacity: 0.8, sizeAttenuation: true }); const asteroidVertices = []; for (let i = 0; i < asteroidCount; i++) { const radius = 240 + (Math.random() - 0.5) * 40; const angle = Math.random() * Math.PI * 2; const height = (Math.random() - 0.5) * 20; asteroidVertices.push( Math.cos(angle) * radius, height, Math.sin(angle) * radius ); } asteroidGeometry.setAttribute('position', new THREE.Float32BufferAttribute(asteroidVertices, 3)); const asteroidBelt = new THREE.Points(asteroidGeometry, asteroidMaterial); scene.add(asteroidBelt); updateProgress(); // Comet with trail const cometGeometry = new THREE.SphereGeometry(1.5, 16, 16); const cometMaterial = new THREE.MeshBasicMaterial({ color: 0x88ffff }); const comet = new THREE.Mesh(cometGeometry, cometMaterial); comet.position.set(600, 0, 0); scene.add(comet); // Comet trail const cometTrailGeometry = new THREE.BufferGeometry(); const cometTrailMaterial = new THREE.LineBasicMaterial({ color: 0x88ffff, transparent: true, opacity: 0.5, linewidth: 2 }); const cometTrail = new THREE.Line(cometTrailGeometry, cometTrailMaterial); scene.add(cometTrail); updateProgress(); // UI state let showOrbits = true; let autoRotate = true; let showInfo = true; let showAsteroids = true; let timeScale = 1; let currentPlanetIndex = 0; // Stats.js for performance monitoring const stats = new Stats(); stats.showPanel(0); document.getElementById('stats').appendChild(stats.dom); // UI event handlers document.getElementById('toggleOrbits').addEventListener('click', function() { showOrbits = !showOrbits; this.classList.toggle('active', showOrbits); orbitPaths.forEach(orbit => { orbit.visible = showOrbits; }); }); document.getElementById('toggleRotation').addEventListener('click', function() { autoRotate = !autoRotate; this.classList.toggle('active', autoRotate); controls.autoRotate = autoRotate; }); document.getElementById('toggleInfo').addEventListener('click', function() { showInfo = !showInfo; this.classList.toggle('active', showInfo); document.getElementById('info-panel').classList.toggle('hidden', !showInfo); }); document.getElementById('toggleAsteroids').addEventListener('click', function() { showAsteroids = !showAsteroids; this.classList.toggle('active', showAsteroids); asteroidBelt.visible = showAsteroids; }); document.getElementById('speedUp').addEventListener('click', function() { timeScale = Math.min(timeScale * 2, 32); updateSpeedDisplay(); }); document.getElementById('speedDown').addEventListener('click', function() { timeScale = Math.max(timeScale / 2, 0.125); updateSpeedDisplay(); }); function updateSpeedDisplay() { document.getElementById('speed-display').textContent = `${timeScale}x`; } // Planet selection document.querySelectorAll('.planet-btn').forEach(btn => { btn.addEventListener('click', function() { const index = parseInt(this.dataset.planetIndex); currentPlanetIndex = index; // Update active state document.querySelectorAll('.planet-btn').forEach(b => b.classList.remove('active')); this.classList.add('active'); // Zoom to planet const planet = planetObjects[index]; animateCameraTo(planet.mesh.position, planet.size * 5); // Update info panel updatePlanetInfo(index); }); }); function updatePlanetInfo(index) { const planet = planetObjects[index]; document.getElementById('planet-name').textContent = planets[index].name; document.getElementById('planet-info').textContent = planets[index].info.description; document.getElementById('planet-diameter').textContent = planets[index].info.diameter; document.getElementById('planet-distance').textContent = planets[index].info.distance; document.getElementById('planet-period').textContent = planets[index].info.period; } // Camera animation function animateCameraTo(targetPosition, distance, duration = 1500) { const startPosition = camera.position.clone(); const startQuaternion = camera.quaternion.clone(); const targetQuaternion = new THREE.Quaternion().setFromUnitVectors( new THREE.Vector3(0, 0, 1), new THREE.Vector3().subVectors(startPosition, targetPosition).normalize() ); const startTime = Date.now(); function update() { const elapsed = Date.now() - startTime; const progress = Math.min(elapsed / duration, 1); const easeProgress = easeOutCubic(progress); // Interpolate position const targetCameraPos = new THREE.Vector3( targetPosition.x, targetPosition.y + distance * 0.5, targetPosition.z + distance ); camera.position.lerpVectors(startPosition, targetCameraPos, easeProgress); // Interpolate rotation THREE.Quaternion.slerp( startQuaternion, targetQuaternion, camera.quaternion, easeProgress ); if (progress < 1) { requestAnimationFrame(update); } else { controls.target.copy(targetPosition); } } update(); } function easeOutCubic(t) { return 1 - Math.pow(1 - t, 3); } // Window resize handler window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); }); // Initial setup document.getElementById('toggleOrbits').classList.add('active'); document.getElementById('toggleRotation').classList.add('active'); document.getElementById('toggleInfo').classList.add('active'); document.getElementById('toggleAsteroids').classList.add('active'); document.querySelector('.planet-btn').classList.add('active'); updatePlanetInfo(0); updateSpeedDisplay(); updateProgress(); // Animation loop let time = 0; function animate() { requestAnimationFrame(animate); stats.begin(); // Update time with scale time += 0.01 * timeScale; // Update planets planetObjects.forEach(planet => { if (planet.orbitRadius > 0) { planet.mesh.position.x = Math.cos(time * planet.orbitSpeed) * planet.orbitRadius; planet.mesh.position.z = Math.sin(time * planet.orbitSpeed) * planet.orbitRadius; } planet.mesh.rotation.y += planet.rotationSpeed * timeScale; }); // Update comet const cometAngle = time * 0.1; const cometDistance = 600 + Math.sin(time * 0.05) * 100; comet.position.set( Math.cos(cometAngle) * cometDistance, Math.sin(cometAngle) * 50, Math.sin(cometAngle) * cometDistance ); // Update comet trail const trailPoints = []; const trailLength = 20; for (let i = 0; i < trailLength; i++) { const trailAngle = cometAngle - i * 0.01; const trailDistance = cometDistance - i * 5; trailPoints.push( new THREE.Vector3( Math.cos(trailAngle) * trailDistance, Math.sin(trailAngle) * 50, Math.sin(trailAngle) * trailDistance ) ); } cometTrailGeometry.setFromPoints(trailPoints); // Rotate galaxy and stars stars.rotation.x += 0.00005 * timeScale; stars.rotation.y += 0.00005 * timeScale; galaxy.rotation.y += 0.0001 * timeScale; // Update controls controls.update(); // Render with post-processing composer.render(); stats.end(); } animate();