Galactic Solar System with Meteor Trails

/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useRef } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import * as THREE from "https://esm.sh/three"; import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls"; function App() { const mountRef = useRef(null); useEffect(() => { if (!mountRef.current) return; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000); const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Starfield (Milky Way effect) const starGeometry = new THREE.BufferGeometry(); const starMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.1, transparent: true, sizeAttenuation: true, map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==') }); const starVertices = []; for (let i = 0; i < 10000; i++) { const theta = Math.random() * Math.PI * 2; const phi = Math.acos(Math.random() * 2 - 1); const radius = 1000; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); starVertices.push(x, y, z); } starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3)); const stars = new THREE.Points(starGeometry, starMaterial); scene.add(stars); // Galaxy effect const galaxyGeometry = new THREE.BufferGeometry(); const galaxyMaterial = new THREE.PointsMaterial({ color: 0x8888ff, size: 0.1, transparent: true, blending: THREE.AdditiveBlending, sizeAttenuation: true, map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==') }); const galaxyVertices = []; const galaxyRadius = 100; const galaxyParticles = 50000; for (let i = 0; i < galaxyParticles; i++) { const angle = Math.random() * Math.PI * 2; const radius = Math.random() * galaxyRadius; const x = Math.cos(angle) * radius; const y = (Math.random() - 0.5) * 10; const z = Math.sin(angle) * radius; galaxyVertices.push(x, y, z); } galaxyGeometry.setAttribute('position', new THREE.Float32BufferAttribute(galaxyVertices, 3)); const galaxy = new THREE.Points(galaxyGeometry, galaxyMaterial); scene.add(galaxy); // Meteors with trails const meteorCount = 50; const meteors = []; const meteorTrails = []; for (let i = 0; i < meteorCount; i++) { const meteorGeometry = new THREE.BufferGeometry(); const meteorMaterial = new THREE.PointsMaterial({ color: 0xFFFFFF, size: 0.5, transparent: true, blending: THREE.AdditiveBlending, sizeAttenuation: true, map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==') }); const theta = Math.random() * Math.PI * 2; const phi = Math.acos(Math.random() * 2 - 1); const radius = Math.random() * 500 + 500; const x = radius * Math.sin(phi) * Math.cos(theta); const y = radius * Math.sin(phi) * Math.sin(theta); const z = radius * Math.cos(phi); meteorGeometry.setAttribute('position', new THREE.Float32BufferAttribute([x, y, z], 3)); const meteor = new THREE.Points(meteorGeometry, meteorMaterial); const velocity = new THREE.Vector3( (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2 ).normalize().multiplyScalar(2); meteors.push({ mesh: meteor, velocity: velocity }); scene.add(meteor); // Create trail const trailGeometry = new THREE.BufferGeometry(); const trailMaterial = new THREE.LineBasicMaterial({ color: 0xFFFFFF, transparent: true, opacity: 0.5, blending: THREE.AdditiveBlending }); const trailPositions = new Float32Array(30 * 3); // 30 points per trail trailGeometry.setAttribute('position', new THREE.BufferAttribute(trailPositions, 3)); const trail = new THREE.Line(trailGeometry, trailMaterial); meteorTrails.push(trail); scene.add(trail); } // Sun const sunGeometry = new THREE.SphereGeometry(5, 32, 32); const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 }); const sun = new THREE.Mesh(sunGeometry, sunMaterial); scene.add(sun); // Planets and Satellites const createCelestialBody = (size, color, orbitRadius, orbitSpeed) => { const geometry = new THREE.SphereGeometry(size, 32, 32); const material = new THREE.MeshBasicMaterial({ color }); const body = new THREE.Mesh(geometry, material); const orbit = new THREE.Object3D(); orbit.add(body); body.position.x = orbitRadius; return { body, orbit, speed: orbitSpeed }; }; const addSatellite = (planet, size, color, orbitRadius, orbitSpeed) => { const satellite = createCelestialBody(size, color, orbitRadius, orbitSpeed); planet.body.add(satellite.orbit); return satellite; }; const planets = [ { ...createCelestialBody(0.4, 0x888888, 10, 0.02), name: "Mercury" }, { ...createCelestialBody(0.6, 0xffa500, 15, 0.015), name: "Venus" }, { ...createCelestialBody(0.7, 0x0000ff, 20, 0.01), name: "Earth" }, { ...createCelestialBody(0.5, 0xff4500, 25, 0.008), name: "Mars" }, { ...createCelestialBody(2.5, 0xffa500, 35, 0.005), name: "Jupiter" }, { ...createCelestialBody(2.0, 0xffd700, 45, 0.004), name: "Saturn" }, { ...createCelestialBody(1.5, 0x00ffff, 55, 0.003), name: "Uranus" }, { ...createCelestialBody(1.4, 0x0000ff, 65, 0.002), name: "Neptune" }, ]; // Add satellites const satellites = [ addSatellite(planets[2], 0.15, 0xcccccc, 1, 0.03), // Earth's Moon addSatellite(planets[3], 0.1, 0xaaaaaa, 0.8, 0.02), // Mars' Phobos addSatellite(planets[3], 0.08, 0x999999, 1, 0.015), // Mars' Deimos addSatellite(planets[4], 0.3, 0xdddddd, 3, 0.04), // Jupiter's Io addSatellite(planets[4], 0.25, 0xeeeeee, 3.5, 0.035), // Jupiter's Europa addSatellite(planets[5], 0.4, 0xcccccc, 3, 0.02), // Saturn's Titan addSatellite(planets[6], 0.2, 0xdddddd, 2.5, 0.03), // Uranus' Titania addSatellite(planets[7], 0.2, 0xeeeeee, 2.5, 0.025), // Neptune's Triton ]; planets.forEach(planet => scene.add(planet.orbit)); camera.position.z = 120; camera.position.y = 40; const controls = new OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.25; controls.enableZoom = true; const animate = () => { requestAnimationFrame(animate); planets.forEach(planet => { planet.orbit.rotation.y += planet.speed; planet.body.rotation.y += planet.speed * 2; }); satellites.forEach(satellite => { satellite.orbit.rotation.y += satellite.speed; }); // Rotate galaxy galaxy.rotation.y += 0.0001; // Move meteors and update trails meteors.forEach((meteor, index) => { const positions = meteor.mesh.geometry.attributes.position.array; const trailPositions = meteorTrails[index].geometry.attributes.position.array; // Shift trail positions for (let i = trailPositions.length - 1; i >= 3; i -= 3) { trailPositions[i] = trailPositions[i - 3]; trailPositions[i - 1] = trailPositions[i - 4]; trailPositions[i - 2] = trailPositions[i - 5]; } // Update meteor position positions[0] += meteor.velocity.x; positions[1] += meteor.velocity.y; positions[2] += meteor.velocity.z; // Update first trail position to current meteor position trailPositions[0] = positions[0]; trailPositions[1] = positions[1]; trailPositions[2] = positions[2]; // Reset meteor position if it goes too far if (Math.abs(positions[0]) > 1000 || Math.abs(positions[1]) > 1000 || Math.abs(positions[2]) > 1000) { const theta = Math.random() * Math.PI * 2; const phi = Math.acos(Math.random() * 2 - 1); const radius = Math.random() * 500 + 500; positions[0] = radius * Math.sin(phi) * Math.cos(theta); positions[1] = radius * Math.sin(phi) * Math.sin(theta); positions[2] = radius * Math.cos(phi); // Reset trail for (let i = 0; i < trailPositions.length; i += 3) { trailPositions[i] = positions[0]; trailPositions[i + 1] = positions[1]; trailPositions[i + 2] = positions[2]; } } meteor.mesh.geometry.attributes.position.needsUpdate = true; meteorTrails[index].geometry.attributes.position.needsUpdate = true; }); // Twinkle stars const starPositions = stars.geometry.attributes.position.array; for (let i = 0; i < starPositions.length; i += 3) { starPositions[i + 1] += Math.random() * 0.1 - 0.05; } stars.geometry.attributes.position.needsUpdate = true; controls.update(); renderer.render(scene, camera); }; animate(); const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); mountRef.current?.removeChild(renderer.domElement); }; }, []); return

; } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` Galactic Solar System with Meteor Trails - Three.js

View Source `, { headers: { "content-type": "text/html", }, }); } const css = ` body { margin: 0; overflow: hidden; background-color: #000; } .source-link { position: fixed; bottom: 10px; right: 10px; color: white; text-decoration: none; background-color: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; } `;

solarsystem