Galactic Solar System with Meteor Trails

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_151":152,"_153":154},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_113":-5,"_20":114,"_22":115,"_116":117,"_118":119,"_26":120,"_24":121,"_122":-5,"_123":-5,"_124":51,"_125":126,"_127":42,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","tk120404","name","solarsystem","branchName","main","version","path","main.tsx","project",{"_32":59,"_13":14,"_43":60,"_61":-5,"_62":51,"_63":64,"_65":64,"_66":-5,"_67":-5,"_68":69,"_70":35,"_71":42,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":92,"_93":94,"_95":96,"_97":51},"tree",[54],"file",{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":53},"contents",[],"upstream","pull","ahead","behind","id","12fa4d00-277d-11f0-b46e-569c3dd06744","fileId","12dd2e0a-277d-11f0-b46e-569c3dd06744","parentId","branchId","12da7764-277d-11f0-b46e-569c3dd06744","branchVersion",6,"latest",true,"createdAt",["D",1731776148587],5,"fileType","http","content","/** @jsxImportSource https://esm.sh/react */\nimport React, { useEffect, useRef } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\nimport * as THREE from \"https://esm.sh/three\";\nimport { OrbitControls } from \"https://esm.sh/three/examples/jsm/controls/OrbitControls\";\n\nfunction App() {\n const mountRef = useRef(null);\n\n useEffect(() => {\n if (!mountRef.current) return;\n\n const scene = new THREE.Scene();\n const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 2000);\n const renderer = new THREE.WebGLRenderer();\n\n renderer.setSize(window.innerWidth, window.innerHeight);\n mountRef.current.appendChild(renderer.domElement);\n\n // Starfield (Milky Way effect)\n const starGeometry = new THREE.BufferGeometry();\n const starMaterial = new THREE.PointsMaterial({\n color: 0xFFFFFF,\n size: 0.1,\n transparent: true,\n sizeAttenuation: true,\n map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==')\n });\n\n const starVertices = [];\n for (let i = 0; i < 10000; i++) {\n const theta = Math.random() * Math.PI * 2;\n const phi = Math.acos(Math.random() * 2 - 1);\n const radius = 1000;\n const x = radius * Math.sin(phi) * Math.cos(theta);\n const y = radius * Math.sin(phi) * Math.sin(theta);\n const z = radius * Math.cos(phi);\n starVertices.push(x, y, z);\n }\n\n starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starVertices, 3));\n const stars = new THREE.Points(starGeometry, starMaterial);\n scene.add(stars);\n\n // Galaxy effect\n const galaxyGeometry = new THREE.BufferGeometry();\n const galaxyMaterial = new THREE.PointsMaterial({\n color: 0x8888ff,\n size: 0.1,\n transparent: true,\n blending: THREE.AdditiveBlending,\n sizeAttenuation: true,\n map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==')\n });\n\n const galaxyVertices = [];\n const galaxyRadius = 100;\n const galaxyParticles = 50000;\n for (let i = 0; i < galaxyParticles; i++) {\n const angle = Math.random() * Math.PI * 2;\n const radius = Math.random() * galaxyRadius;\n const x = Math.cos(angle) * radius;\n const y = (Math.random() - 0.5) * 10;\n const z = Math.sin(angle) * radius;\n galaxyVertices.push(x, y, z);\n }\n\n galaxyGeometry.setAttribute('position', new THREE.Float32BufferAttribute(galaxyVertices, 3));\n const galaxy = new THREE.Points(galaxyGeometry, galaxyMaterial);\n scene.add(galaxy);\n\n // Meteors with trails\n const meteorCount = 50;\n const meteors = [];\n const meteorTrails = [];\n\n for (let i = 0; i < meteorCount; i++) {\n const meteorGeometry = new THREE.BufferGeometry();\n const meteorMaterial = new THREE.PointsMaterial({\n color: 0xFFFFFF,\n size: 0.5,\n transparent: true,\n blending: THREE.AdditiveBlending,\n sizeAttenuation: true,\n map: new THREE.TextureLoader().load('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAACdSURBVBjTXY69DcJAEESD2YrgcB9HdEAHJHSAaIBWXAsuXOLshPTwJ0GIAhB/HRABCZjZkW5XelrpVeMhIh5TSt854x0/MDXe8Zt/4GeMcV6W5XNd131K6Qg0xnj0fT+XUm4ppTPQMzAQ0fO+BZrn+QHshRA+bdseqpI+wLcs3/e+9JMRUK21G5nXOb/jpa7rZwixfudSisGHrgPvTlKI/AKLe0YbZiEBRQAAAABJRU5ErkJggg==')\n });\n\n const theta = Math.random() * Math.PI * 2;\n const phi = Math.acos(Math.random() * 2 - 1);\n const radius = Math.random() * 500 + 500;\n const x = radius * Math.sin(phi) * Math.cos(theta);\n const y = radius * Math.sin(phi) * Math.sin(theta);\n const z = radius * Math.cos(phi);\n\n meteorGeometry.setAttribute('position', new THREE.Float32BufferAttribute([x, y, z], 3));\n const meteor = new THREE.Points(meteorGeometry, meteorMaterial);\n \n const velocity = new THREE.Vector3(\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2,\n (Math.random() - 0.5) * 2\n ).normalize().multiplyScalar(2);\n\n meteors.push({ mesh: meteor, velocity: velocity });\n scene.add(meteor);\n\n // Create trail\n const trailGeometry = new THREE.BufferGeometry();\n const trailMaterial = new THREE.LineBasicMaterial({\n color: 0xFFFFFF,\n transparent: true,\n opacity: 0.5,\n blending: THREE.AdditiveBlending\n });\n const trailPositions = new Float32Array(30 * 3); // 30 points per trail\n trailGeometry.setAttribute('position', new THREE.BufferAttribute(trailPositions, 3));\n const trail = new THREE.Line(trailGeometry, trailMaterial);\n meteorTrails.push(trail);\n scene.add(trail);\n }\n\n // Sun\n const sunGeometry = new THREE.SphereGeometry(5, 32, 32);\n const sunMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });\n const sun = new THREE.Mesh(sunGeometry, sunMaterial);\n scene.add(sun);\n\n // Planets and Satellites\n const createCelestialBody = (size, color, orbitRadius, orbitSpeed) => {\n const geometry = new THREE.SphereGeometry(size, 32, 32);\n const material = new THREE.MeshBasicMaterial({ color });\n const body = new THREE.Mesh(geometry, material);\n const orbit = new THREE.Object3D();\n orbit.add(body);\n body.position.x = orbitRadius;\n return { body, orbit, speed: orbitSpeed };\n };\n\n const addSatellite = (planet, size, color, orbitRadius, orbitSpeed) => {\n const satellite = createCelestialBody(size, color, orbitRadius, orbitSpeed);\n planet.body.add(satellite.orbit);\n return satellite;\n };\n\n const planets = [\n { ...createCelestialBody(0.4, 0x888888, 10, 0.02), name: \"Mercury\" },\n { ...createCelestialBody(0.6, 0xffa500, 15, 0.015), name: \"Venus\" },\n { ...createCelestialBody(0.7, 0x0000ff, 20, 0.01), name: \"Earth\" },\n { ...createCelestialBody(0.5, 0xff4500, 25, 0.008), name: \"Mars\" },\n { ...createCelestialBody(2.5, 0xffa500, 35, 0.005), name: \"Jupiter\" },\n { ...createCelestialBody(2.0, 0xffd700, 45, 0.004), name: \"Saturn\" },\n { ...createCelestialBody(1.5, 0x00ffff, 55, 0.003), name: \"Uranus\" },\n { ...createCelestialBody(1.4, 0x0000ff, 65, 0.002), name: \"Neptune\" },\n ];\n\n // Add satellites\n const satellites = [\n addSatellite(planets[2], 0.15, 0xcccccc, 1, 0.03), // Earth's Moon\n addSatellite(planets[3], 0.1, 0xaaaaaa, 0.8, 0.02), // Mars' Phobos\n addSatellite(planets[3], 0.08, 0x999999, 1, 0.015), // Mars' Deimos\n addSatellite(planets[4], 0.3, 0xdddddd, 3, 0.04), // Jupiter's Io\n addSatellite(planets[4], 0.25, 0xeeeeee, 3.5, 0.035), // Jupiter's Europa\n addSatellite(planets[5], 0.4, 0xcccccc, 3, 0.02), // Saturn's Titan\n addSatellite(planets[6], 0.2, 0xdddddd, 2.5, 0.03), // Uranus' Titania\n addSatellite(planets[7], 0.2, 0xeeeeee, 2.5, 0.025), // Neptune's Triton\n ];\n\n planets.forEach(planet => scene.add(planet.orbit));\n\n camera.position.z = 120;\n camera.position.y = 40;\n\n const controls = new OrbitControls(camera, renderer.domElement);\n controls.enableDamping = true;\n controls.dampingFactor = 0.25;\n controls.enableZoom = true;\n\n const animate = () => {\n requestAnimationFrame(animate);\n\n planets.forEach(planet => {\n planet.orbit.rotation.y += planet.speed;\n planet.body.rotation.y += planet.speed * 2;\n });\n\n satellites.forEach(satellite => {\n satellite.orbit.rotation.y += satellite.speed;\n });\n\n // Rotate galaxy\n galaxy.rotation.y += 0.0001;\n\n // Move meteors and update trails\n meteors.forEach((meteor, index) => {\n const positions = meteor.mesh.geometry.attributes.position.array;\n const trailPositions = meteorTrails[index].geometry.attributes.position.array;\n\n // Shift trail positions\n for (let i = trailPositions.length - 1; i >= 3; i -= 3) {\n trailPositions[i] = trailPositions[i - 3];\n trailPositions[i - 1] = trailPositions[i - 4];\n trailPositions[i - 2] = trailPositions[i - 5];\n }\n\n // Update meteor position\n positions[0] += meteor.velocity.x;\n positions[1] += meteor.velocity.y;\n positions[2] += meteor.velocity.z;\n\n // Update first trail position to current meteor position\n trailPositions[0] = positions[0];\n trailPositions[1] = positions[1];\n trailPositions[2] = positions[2];\n\n // Reset meteor position if it goes too far\n if (Math.abs(positions[0]) > 1000 || Math.abs(positions[1]) > 1000 || Math.abs(positions[2]) > 1000) {\n const theta = Math.random() * Math.PI * 2;\n const phi = Math.acos(Math.random() * 2 - 1);\n const radius = Math.random() * 500 + 500;\n positions[0] = radius * Math.sin(phi) * Math.cos(theta);\n positions[1] = radius * Math.sin(phi) * Math.sin(theta);\n positions[2] = radius * Math.cos(phi);\n\n // Reset trail\n for (let i = 0; i < trailPositions.length; i += 3) {\n trailPositions[i] = positions[0];\n trailPositions[i + 1] = positions[1];\n trailPositions[i + 2] = positions[2];\n }\n }\n\n meteor.mesh.geometry.attributes.position.needsUpdate = true;\n meteorTrails[index].geometry.attributes.position.needsUpdate = true;\n });\n\n // Twinkle stars\n const starPositions = stars.geometry.attributes.position.array;\n for (let i = 0; i < starPositions.length; i += 3) {\n starPositions[i + 1] += Math.random() * 0.1 - 0.05;\n }\n stars.geometry.attributes.position.needsUpdate = true;\n\n controls.update();\n renderer.render(scene, camera);\n };\n\n animate();\n\n const handleResize = () => {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n mountRef.current?.removeChild(renderer.domElement);\n };\n }, []);\n\n return

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

\n \n \n View Source\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n margin: 0;\n overflow: hidden;\n background-color: #000;\n}\n.source-link {\n position: fixed;\n bottom: 10px;\n right: 10px;\n color: white;\n text-decoration: none;\n background-color: rgba(0, 0, 0, 0.5);\n padding: 5px 10px;\n border-radius: 5px;\n}\n`;","deleted",false,"label",[19],{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":55,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_56":57,"_18":58},["D",1731776148587],"children",[],[19],"12da2caa-277d-11f0-b46e-569c3dd06744",["D",1746207858914],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","84c4dcc8-9b17-4cc2-a725-27999fac4748","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","0a2a8299-ee07-4c4d-8a4a-7ff776009cf7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_112":108},"org",{"_11":12,"_106":-5,"_107":108,"_68":69,"_109":110,"_111":51},"branch",{"_17":40,"_13":16,"_32":38,"_98":59,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":14,"_105":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb3ZqUUFiRnJ0dlRkSzFRTEdvaW4zU21wZFcifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":59,"_13":14,"_43":147,"_61":-5,"_62":51,"_63":64,"_65":64,"_66":-5,"_67":-5,"_68":69,"_70":35,"_71":42,"_72":-5,"_73":-5,"_74":75,"_76":77,"_78":-5,"_79":-5,"_80":-5,"_81":-5,"_82":83,"_84":83,"_85":86,"_87":86,"_88":86,"_89":83,"_90":83,"_91":148,"_93":149,"_95":150,"_97":51},[144],"files",[144],"counts",{"_133":134,"_135":134,"_136":134,"_137":138,"_139":140},[],{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":44,"_17":45,"_46":47,"_48":49,"_50":51,"_52":-5,"_18":132},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],"pulls",0,"branches","forks","envVars",{"_141":134,"_143":134},"connections",{"_141":134,"_142":134},"count","unfilledCount","emptyCount",{"_32":33,"_13":19,"_34":35,"_36":-5,"_37":38,"_39":40,"_41":42,"_43":55,"_17":45,"_46":47,"_48":-5,"_50":51,"_52":-5,"_56":145,"_18":146},[],[19],["D",1746207858914],{"_11":12,"_112":108},{"_11":12,"_106":-5,"_107":108,"_68":69,"_109":110,"_111":51},{"_17":40,"_13":16,"_32":38,"_98":59,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":14,"_105":12},"ctx",{"_91":-5,"_184":185,"_129":186,"_187":188,"_189":190,"_191":51,"_192":51,"_193":51,"_194":42,"_195":-5,"_196":-7,"_197":-7,"_198":134,"_199":51,"_200":51,"_201":-5},"ENV",{"_155":156,"_157":158,"_159":16,"_160":161,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","062e3653a6c832c70f878fb5d69af4bb53420e71","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","aiChatModels",[202,203,204,205,206],[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","navCollapsed","currentOrgId",{"_207":230,"_52":231,"_210":232,"_66":233,"_213":42,"_214":42,"_215":216,"_217":42},{"_207":226,"_52":227,"_210":228,"_66":229,"_213":42,"_214":42,"_215":216,"_217":51},{"_207":222,"_52":223,"_210":224,"_66":225,"_213":42,"_214":42,"_215":216,"_217":51},{"_207":218,"_52":219,"_210":220,"_66":221,"_213":42,"_214":42,"_215":216,"_217":51},{"_207":208,"_52":209,"_210":211,"_66":212,"_213":42,"_214":42,"_215":216,"_217":51},"value","fable","Claude Fable 5.1","shortLabel","Fable","Most capable; 2× Opus pricing","imageInput","thinking","contextWindowSize",1000000,"isDefault","opus55","Claude Opus 5.5","Opus","Highly capable for complex work","sonnet55","Claude Sonnet 5.5","Sonnet","Balanced speed and capability","haiku55","Claude Haiku 5.5","Haiku 5.5","Fast; good for straightforward edits","deepseekflash","DeepSeek V4.1 Flash","DeepSeek Flash","Smart and very cheap"]