3D Milkyway Galaxy with Solar System

Camera Views

// Scene setup const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('galaxy'), antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setClearColor(0x000000); // Camera position camera.position.set(0, 50, 100); // Controls const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.05; // Galaxy function createGalaxy() { const galaxyGeometry = new THREE.BufferGeometry(); const particles = 50000; const positions = new Float32Array(particles * 3); const colors = new Float32Array(particles * 3); for (let i = 0; i < particles; i++) { const i3 = i * 3; const radius = Math.random() * 200; const angle = Math.random() * Math.PI * 2; const height = (Math.random() - 0.5) * 20; positions[i3] = Math.cos(angle) * radius; positions[i3 + 1] = height; positions[i3 + 2] = Math.sin(angle) * radius; colors[i3] = 0.5 + Math.random() * 0.5; colors[i3 + 1] = 0.5 + Math.random() * 0.5; colors[i3 + 2] = 0.5 + Math.random() * 0.5; } galaxyGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); galaxyGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3)); const galaxyMaterial = new THREE.PointsMaterial({ size: 0.2, vertexColors: true, transparent: true, opacity: 0.8 }); const galaxy = new THREE.Points(galaxyGeometry, galaxyMaterial); scene.add(galaxy); return galaxy; } const galaxy = createGalaxy(); // Sun const sunGeometry = new THREE.SphereGeometry(5, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 1 }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // Planets data (name, radius, distance, color, speed) const planetsData = [ { name: 'Mercury', radius: 1.5, distance: 20, color: 0x8c8c8c, speed: 0.04 }, { name: 'Venus', radius: 2.5, distance: 30, color: 0xe6c229, speed: 0.015 }, { name: 'Earth', radius: 2.6, distance: 40, color: 0x3498db, speed: 0.01 }, { name: 'Mars', radius: 2, distance: 50, color: 0xe67e22, speed: 0.008 }, { name: 'Jupiter', radius: 4, distance: 70, color: 0xf1c40f, speed: 0.002 }, { name: 'Saturn', radius: 3.5, distance: 90, color: 0xf39c12, speed: 0.0009 }, { name: 'Uranus', radius: 3, distance: 110, color: 0x1abc9c, speed: 0.0004 }, { name: 'Neptune', radius: 3, distance: 130, color: 0x3498db, speed: 0.0001 }, { name: 'Pluto', radius: 1, distance: 150, color: 0x95a5a6, speed: 0.00007 } ]; const planets = []; const planetOrbits = []; // Create planets and orbits planetsData.forEach((planetData, index) => { // Planet const geometry = new THREE.SphereGeometry(planetData.radius, 32, 32); const material = new THREE.MeshPhongMaterial({ color: planetData.color, shininess: 10 }); const planet = new THREE.Mesh(geometry, material); planet.position.x = planetData.distance; planet.userData = { speed: planetData.speed, distance: planetData.distance }; scene.add(planet); planets.push(planet); // Orbit path const orbitGeometry = new THREE.BufferGeometry(); const orbitPoints = []; const segments = 64; for (let i = 0; i <= segments; i++) { const theta = (i / segments) * Math.PI * 2; orbitPoints.push(new THREE.Vector3( Math.cos(theta) * planetData.distance, 0, Math.sin(theta) * planetData.distance )); } orbitGeometry.setFromPoints(orbitPoints); const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.3 }); const orbit = new THREE.Line(orbitGeometry, orbitMaterial); scene.add(orbit); planetOrbits.push(orbit); }); // Lighting const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 1, 100); pointLight.position.set(0, 0, 0); scene.add(pointLight); // Animation let time = 0; const animate = () => { requestAnimationFrame(animate); // Rotate galaxy galaxy.rotation.y += 0.0005; // Rotate planets planets.forEach(planet => { time += 0.01; const angle = time * planet.userData.speed; planet.position.x = Math.cos(angle) * planet.userData.distance; planet.position.z = Math.sin(angle) * planet.userData.distance; planet.rotation.y += 0.01; }); controls.update(); renderer.render(scene, camera); }; animate(); // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Camera views document.getElementById('topView').addEventListener('click', () => { camera.position.set(0, 200, 0); camera.lookAt(0, 0, 0); }); document.getElementById('sideView').addEventListener('click', () => { camera.position.set(200, 0, 0); camera.lookAt(0, 0, 0); }); document.getElementById('followEarth').addEventListener('click', () => { const earth = planets[2]; // Earth is the 3rd planet camera.position.set(earth.position.x, earth.position.y + 20, earth.position.z + 40); camera.lookAt(earth.position); }); document.getElementById('freeView').addEventListener('click', () => { camera.position.set(0, 50, 100); camera.lookAt(0, 0, 0); });