Simulador 3D Interativo do Sistema Solar

const { execSync } = require('child_process'); const fs = require('fs'); // This is a complex 3D application - we'll create it as a single HTML file const htmlContent = `<!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.8); backdrop-filter: blur(10px); padding: 15px 25px; border-radius: 15px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); z-index: 100; } #ui label { color: #fff; font-size: 14px; font-weight: 500; letter-spacing: 0.5px; } #speedSlider { width: 150px; accent-color: #4a9eff; cursor: pointer; } #speedValue { color: #4a9eff; font-weight: bold; min-width: 40px; text-align: center; } #pauseBtn { background: linear-gradient(135deg, #4a9eff, #6c5ce7); color: white; border: none; padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.3s ease; letter-spacing: 0.5px; } #pauseBtn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(74, 158, 255, 0.4); } #resetBtn { background: rgba(255, 255, 255, 0.1); color: white; border: 1px solid rgba(255, 255, 255, 0.2); padding: 8px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s ease; } #resetBtn:hover { background: rgba(255, 255, 255, 0.2); } #infoBox { position: fixed; top: 20px; right: 20px; background: rgba(20, 20, 30, 0.8); backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 13px; z-index: 100; min-width: 150px; } #infoBox div { margin: 5px 0; } #infoBox .label { color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } #infoBox .value { color: #4a9eff; font-weight: 600; font-size: 16px; } #planetInfo { position: fixed; top: 20px; left: 20px; background: rgba(20, 20, 30, 0.8); backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; z-index: 100; display: none; max-width: 250px; } #planetInfo h3 { margin-bottom: 8px; color: #4a9eff; font-size: 18px; } #planetInfo p { color: #aaa; line-height: 1.6; font-size: 13px; } .hint { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); font-size: 12px; z-index: 100; text-align: center; pointer-events: none; } @media (max-width: 768px) { #ui { flex-wrap: wrap; justify-content: center; padding: 10px 15px; gap: 10px; } #infoBox { top: 10px; right: 10px; padding: 10px; } #planetInfo { top: 10px; left: 10px; padding: 10px; max-width: 200px; } } </style> </head> <body> <div id="infoBox"> <div> <div class="label">Time Scale</div> <div class="value" id="timeScale">1.0x</div> </div> <div> <div class="label">Elapsed Time</div> <div class="value" id="elapsedTime">0 days</div> </div> </div> <div id="planetInfo"> <h3 id="planetName"></h3> <p id="planetDetails"></p> </div> <div class="hint">Click a planet to focus • Drag to rotate • Scroll to zoom • Space to pause</div> <div id="ui"> <label for="speedSlider">Speed</label> <input type="range" id="speedSlider" min="0" max="5" step="0.1" value="1"> <span id="speedValue">1.0x</span> <button id="pauseBtn">Pause</button> <button id="resetBtn">Reset View</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, 50, 100); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; 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 = 500; controls.autoRotate = false; controls.autoRotateSpeed = 0.5; // Lighting const ambientLight = new THREE.AmbientLight(0x404040, 0.5); scene.add(ambientLight); const sunLight = new THREE.PointLight(0xffdd88, 2, 1000); sunLight.position.set(0, 0, 0); scene.add(sunLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(50, 50, 50); scene.add(directionalLight); // Starfield 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 = 500 + Math.random() * 500; 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.5, vertexColors: true, transparent: true, opacity: 0.8 }); const stars = new THREE.Points(starsGeometry, starsMaterial); scene.add(stars); return stars; } const stars = createStarfield(); // Sun function createSun() { const sunGeometry = new THREE.SphereGeometry(5, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffdd44, emissive: 0xffaa00, emissiveIntensity: 1.5 }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); // Glow effect const glowGeometry = new THREE.SphereGeometry(6, 32, 32); const glowMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa00, transparent: true, opacity: 0.3 }); const glow = new THREE.Mesh(glowGeometry, glowMaterial); sun.add(glow); scene.add(sun); return sun; } const sun = createSun(); // Planet data const planetData = [ { name: 'Mercury', radius: 0.8, distance: 10, color: 0x8c7e6d, speed: 4.15, info: 'The smallest planet and closest to the Sun. Surface temperatures range from -173°C to 427°C.' }, { name: 'Venus', radius: 1.2, distance: 15, color: 0xe8cda0, speed: 1.62, info: 'The hottest planet with a thick toxic atmosphere. Similar in size to Earth.' }, { name: 'Earth', radius: 1.3, distance: 20, color: 0x4a90d9, speed: 1.0, info: 'Our home planet. The only known planet with life. 71% covered in water.' }, { name: 'Mars', radius: 1.0, distance: 25, color: 0xc1440e, speed: 0.53, info: 'The Red Planet. Has the largest volcano in the solar system - Olympus Mons.' }, { name: 'Jupiter', radius: 3.5, distance: 35, color: 0xd4a574, speed: 0.084, info: 'The largest planet. A gas giant with a Great Red Spot storm larger than Earth.' }, { name: 'Saturn', radius: 3.0, distance: 45, color: 0xe8cda0, speed: 0.034, info: 'Known for its beautiful ring system. The least dense planet - would float in water.' }, { name: 'Uranus', radius: 2.0, distance: 55, color: 0x7ec8e3, speed: 0.012, info: 'An ice giant that rotates on its side. Has faint rings and 27 known moons.' }, { name: 'Neptune', radius: 1.9, distance: 65, color: 0x4169e1, speed: 0.006, info: 'The windiest planet with speeds up to 2,100 km/h. The most distant planet.' } ]; // Create planets const planets = []; const orbitLines = []; planetData.forEach((data, index) => { // Planet mesh const geometry = new THREE.SphereGeometry(data.radius, 32, 32); const material = new THREE.MeshPhongMaterial({ color: data.color, shininess: 25, specular: 0x222222 }); const planet = new THREE.Mesh(geometry, material); planet.castShadow = true; planet.receiveShadow = true; // Store data planet.userData = { name: data.name, distance: data.distance, speed: data.speed, angle: Math.random() * Math.PI * 2, info: data.info, radius: data.radius }; // Position initially planet.position.x = data.distance; scene.add(planet); planets.push(planet); // Orbit line 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); // Label const label = createLabel(data.name); planet.add(label); label.position.y = data.radius + 1.5; }); // Create text label function createLabel(text) { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = 256; canvas.height = 64; ctx.fillStyle = 'rgba(0,0,0,0)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.font = 'bold 28px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // Text shadow ctx.shadowColor = 'rgba(0,0,0,0.8)'; ctx.shadowBlur = 10; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.fillStyle = '#ffffff'; ctx.fillText(text, canvas.width / 2, canvas.height / 2); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.SpriteMaterial({ map: texture, transparent: true, depthTest: false }); const sprite = new THREE.Sprite(material); sprite.scale.set(4, 1, 1); return sprite; } // Saturn's rings function createSaturnRings(planet) { const ringGeometry = new THREE.RingGeometry(planet.userData.radius * 1.4, planet.userData.radius * 2.2, 32); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0xc8b89a, side: THREE.DoubleSide, transparent: true, opacity: 0.6 }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2.5; planet.add(ring); } // Add rings to Saturn const saturn = planets[5]; createSaturnRings(saturn); // Simulation state let isPaused = false; let speedMultiplier = 1.0; let elapsedDays = 0; let focusedPlanet = null; let focusTransition = null; // UI Elements const speedSlider = document.getElementById('speedSlider'); const speedValue = document.getElementById('speedValue'); const pauseBtn = document.getElementById('pauseBtn'); const resetBtn = document.getElementById('resetBtn'); const timeScaleDisplay = document.getElementById('timeScale'); const elapsedTimeDisplay = document.getElementById('elapsedTime'); const planetInfo = document.getElementById('planetInfo'); const planetName = document.getElementById('planetName'); const planetDetails = document.getElementById('planetDetails'); // Event listeners speedSlider.addEventListener('input', (e) => { speedMultiplier = parseFloat(e.target.value); speedValue.textContent = speedMultiplier.toFixed(1) + 'x'; timeScaleDisplay.textContent = speedMultiplier.toFixed(1) + 'x'; }); pauseBtn.addEventListener('click', () => { isPaused = !isPaused; pauseBtn.textContent = isPaused ? 'Resume' : 'Pause'; }); resetBtn.addEventListener('click', () => { camera.position.set(0, 50, 100); camera.lookAt(0, 0, 0); controls.target.set(0, 0, 0); controls.update(); focusedPlanet = null; planetInfo.style.display = 'none'; }); // Keyboard controls document.addEventListener('keydown', (e) => { if (e.code === 'Space') { e.preventDefault(); pauseBtn.click(); } }); // Raycaster for planet clicking const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); 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; const distance = planet.userData.distance * 1.5; const targetPosition = new THREE.Vector3( planet.position.x * 1.5, planet.position.y + distance * 0.5, planet.position.z * 1.5 ); // Smooth transition focusTransition = { start: camera.position.clone(), end: targetPosition, progress: 0, duration: 1.5 }; // Show planet info planetName.textContent = planet.userData.name; planetDetails.textContent = planet.userData.info; planetInfo.style.display = 'block'; } // Animation loop const clock = new THREE.Clock(); let lastTime = 0; function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); const elapsed = clock.getElapsedTime(); // Update stars twinkling stars.rotation.y += delta * 0.01; // Update planets if (!isPaused) { const timeScale = delta * speedMultiplier; elapsedDays += timeScale * 365; // Approximate days planets.forEach((planet) => { const data = planet.userData; data.angle += timeScale * data.speed * 0.1; planet.position.x = Math.cos(data.angle) * data.distance; planet.position.z = Math.sin(data.angle) * data.distance; // Rotate planet on its axis planet.rotation.y += delta * 0.5; }); // Update elapsed time display const days = Math.floor(elapsedDays); elapsedTimeDisplay.textContent = days.toLocaleString() + ' days'; } // Handle focus transition if (focusTransition) { focusTransition.progress += delta / focusTransition.duration; if (focusTransition.progress >= 1) { focusTransition = null; } else { const t = focusTransition.progress; const eased = t * t * (3 - 2 * t); // Smoothstep camera.position.lerpVectors(focusTransition.start, focusTransition.end, eased); controls.target.lerp(focusedPlanet.position, eased); } } else if (focusedPlanet) { // Follow focused planet controls.target.copy(focusedPlanet.position); } // Update controls controls.update(); // Render renderer.render(scene, camera); } // Window resize window.addEventListener('resize', () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // Start animation animate(); // Initial camera position camera.position.set(0, 50, 100); controls.target.set(0, 0, 0); controls.update(); </script> </body> </html>`; // Write the file fs.writeFileSync('solar-system-simulator.html', htmlContent); console.log('Solar system simulator created successfully!'); console.log('Open solar-system-simulator.html in your browser to explore the 3D solar system.');