3D Universe Simulator

We'll create a 3D universe visualization using Three.js for rendering and Cannon.js for physics, with a responsive UI and time controls. This will be a simplified version that can be expanded with more detailed astronomical data. 3D Universe Simulator

// Initialize Three.js scene const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Initialize Cannon.js physics world const world = new CANNON.World(); world.gravity.set(0, 0, 0); world.broadphase = new CANNON.NaiveBroadphase(); world.solver.iterations = 10; // Celestial bodies data (simplified) const celestialBodies = [ { name: 'Sun', radius: 5, color: 0xffff00, position: { x: 0, y: 0, z: 0 }, mass: 1000 }, { name: 'Earth', radius: 1, color: 0x1a66ff, position: { x: 10, y: 0, z: 0 }, mass: 1, velocity: { x: 0, y: 0, z: -1 } }, { name: 'Mars', radius: 0.7, color: 0xff3300, position: { x: 15, y: 0, z: 0 }, mass: 0.6, velocity: { x: 0, y: 0, z: -0.8 } } ]; // Create bodies and physics const bodies = []; const physicsBodies = []; const orbitPaths = []; celestialBodies.forEach(body => { // Three.js mesh const geometry = new THREE.SphereGeometry(body.radius, 32, 32); const material = new THREE.MeshBasicMaterial({ color: body.color }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(body.position.x, body.position.y, body.position.z); scene.add(mesh); bodies.push(mesh); // Cannon.js body const shape = new CANNON.Sphere(body.radius); const physicsBody = new CANNON.Body({ mass: body.mass }); physicsBody.addShape(shape); physicsBody.position.set(body.position.x, body.position.y, body.position.z); if (body.velocity) { physicsBody.velocity.set(body.velocity.x, body.velocity.y, body.velocity.z); } world.addBody(physicsBody); physicsBodies.push(physicsBody); // Orbit path if (body.name !== 'Sun') { const orbitGeometry = new THREE.BufferGeometry(); const orbitMaterial = new THREE.LineBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.5 }); const orbit = new THREE.Line(orbitGeometry, orbitMaterial); scene.add(orbit); orbitPaths.push({ orbit, body: physicsBody }); } }); // Camera position camera.position.set(0, 30, 30); camera.lookAt(0, 0, 0); // Controls let isDragging = false; let previousMousePosition = { x: 0, y: 0 }; let rotationSpeed = 0.005; let zoomSpeed = 0.1; document.addEventListener('mousedown', () => isDragging = true); document.addEventListener('mouseup', () => isDragging = false); document.addEventListener('mousemove', (event) => { if (!isDragging) return; const deltaMove = { x: event.clientX - previousMousePosition.x, y: event.clientY - previousMousePosition.y }; camera.position.x -= deltaMove.x * rotationSpeed; camera.position.y += deltaMove.y * rotationSpeed; camera.lookAt(0, 0, 0); previousMousePosition = { x: event.clientX, y: event.clientY }; }); document.addEventListener('wheel', (event) => { const direction = event.deltaY > 0 ? 1 : -1; camera.position.z += direction * zoomSpeed; }); // Time controls let timeScale = 1; document.getElementById('pause').addEventListener('click', () => timeScale = 0); document.getElementById('slow').addEventListener('click', () => timeScale = 0.5); document.getElementById('normal').addEventListener('click', () => timeScale = 1); document.getElementById('fast').addEventListener('click', () => timeScale = 5); // Reset view document.getElementById('reset-view').addEventListener('click', () => { camera.position.set(0, 30, 30); camera.lookAt(0, 0, 0); }); // Toggle orbits let showOrbits = true; document.getElementById('toggle-orbits').addEventListener('click', () => { showOrbits = !showOrbits; orbitPaths.forEach(path => path.orbit.visible = showOrbits); }); // Animation loop function animate() { requestAnimationFrame(animate); // Update physics world.step(1/60 * timeScale); // Update Three.js objects for (let i = 0; i < bodies.length; i++) { bodies[i].position.copy(physicsBodies[i].position); } // Update orbit paths if (showOrbits) { orbitPaths.forEach(path => { const points = []; const steps = 100; const radius = path.body.position.distanceTo(new CANNON.Vec3(0, 0, 0)); for (let i = 0; i <= steps; i++) { const angle = (i / steps) * Math.PI * 2; points.push(new THREE.Vector3( Math.cos(angle) * radius, 0, Math.sin(angle) * radius )); } path.orbit.geometry.setFromPoints(points); }); } renderer.render(scene, camera); } // Handle window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); animate();