\n \n \n

\n \n

`;\n\n container.appendChild(infoPanel);\n infoPanel.querySelector('#info-close').addEventListener('click', () => { infoPanel.style.display = 'none'; });\n\n const wikiMap = {\n sun: 'Sun',\n mercury: 'Mercury_(planet)',\n venus: 'Venus',\n earth: 'Earth',\n moon: 'Moon',\n mars: 'Mars',\n jupiter: 'Jupiter',\n saturn: 'Saturn',\n uranus: 'Uranus',\n neptune: 'Neptune',\n alphaA: 'Alpha_Centauri_A',\n alphaB: 'Alpha_Centauri_B',\n proxima: 'Proxima_Centauri',\n milkyWay: 'Milky_Way',\n observableUniverse: 'Observable_universe',\n 'WASP-12': 'WASP-12',\n 'WASP-12b': 'WASP-12b'\n };\n\n const imageMap = {\n sun: '/pexels-pixabay-87611.jpg',\n alphaA: '/Screenshot 2026-07-06 105901.png',\n alphaB: '/Screenshot 2026-07-06 105901.png',\n 'WASP-12': '/image_8004e-WASP-12b.jpg',\n milkyWay: '/mwg.jpg',\n observableUniverse: '/Screenshot 2026-07-06 110410.png',\n 'Wormhole?': '/Screenshot 2026-07-06 110625.png'\n };\n\n function showInfo(title, html, color = '#fff', imgSrc = null) {\n infoPanel.style.display = 'block';\n infoPanel.querySelector('#info-title').textContent = title;\n const body = infoPanel.querySelector('#info-body');\n body.innerHTML = html;\n body.style.color = color;\n const img = infoPanel.querySelector('#info-img');\n if (img && imgSrc) {\n img.src = imgSrc;\n img.style.display = 'block';\n } else if (img) {\n img.src = '';\n img.style.display = 'none';\n }\n }\n\n // Picking\n const raycaster = new THREE.Raycaster();\n const pointer = new THREE.Vector2();\n\n function pickAndFollow(clientX, clientY) {\n const rect = renderer.domElement.getBoundingClientRect();\n pointer.x = ((clientX - rect.left) / rect.width) * 2 - 1;\n pointer.y = -((clientY - rect.top) / rect.height) * 2 + 1;\n raycaster.setFromCamera(pointer, camera);\n const meshList = Object.values(bodies)\n .filter(b => b && b.mesh)\n .map(b => b.mesh);\n const hits = raycaster.intersectObjects(meshList, true);\n if (hits.length > 0) {\n const m = hits[0].object;\n const entry = Object.entries(bodies).find(([k,v]) => v.mesh === m || v.mesh === m.parent || (v.mesh && v.mesh.uuid === m.uuid));\n if (entry) {\n const key = entry[0];\n if (key === 'Wormhole?' || key === 'wormhole') {\n showInfo('Wormhole?', '[REDACTED] media... not found', '#ff5555', imageMap['Wormhole?']);\n } else {\n const title = wikiMap[key] || (key.charAt(0).toUpperCase() + key.slice(1));\n const imgForKey = imageMap[key] || null;\n showInfo(title, 'Loading...', '#ffffff', imgForKey);\n fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}`)\n .then(r => {\n if (!r.ok) throw new Error('no summary');\n return r.json();\n })\n .then(data => {\n const extract = data.extract_html || data.extract || 'No summary available.';\n showInfo(data.title || title, extract, '#ffffff', imgForKey);\n })\n .catch(() => {\n showInfo(title, 'No summary available.', '#ffffff', imgForKey);\n });\n }\n }\n }\n }\n\n renderer.domElement.addEventListener('pointerdown', (ev) => {\n if (ev.isPrimary) pickAndFollow(ev.clientX, ev.clientY);\n });\n\n // Animation & follow behavior\n let last = performance.now();\n function animate(now) {\n let dt = (now - last) / 1000;\n dt = Math.min(dt, 0.1);\n last = now;\n\n systemGroup.traverse((obj) => {\n if (obj.userData && obj.userData.orbitSpeed) {\n obj.userData.angle = (obj.userData.angle || 0) + dt * obj.userData.orbitSpeed;\n const r = obj.userData.distance;\n obj.position.set(Math.cos(obj.userData.angle) * r, 0, Math.sin(obj.userData.angle) * r);\n }\n if (obj.userData && obj.userData.spinSpeed) {\n obj.rotation.y += dt * obj.userData.spinSpeed;\n }\n });\n\n // follow logic\n if (followTarget) {\n const targetWorld = new THREE.Vector3();\n followTarget.getWorldPosition(targetWorld);\n\n const prevTargetWorld = controls.target.clone();\n controls.target.lerp(targetWorld.clone(), Math.min(1, dt * 1));\n\n if (followZooming && followZoomTargetPos) {\n if (!controlsUserInteractingRef.get()) {\n camera.position.lerp(followZoomTargetPos, Math.min(1, dt * 1.5));\n const stopThreshold = Math.max(1.0, followOffset.length() * 0.01);\n if (camera.position.distanceTo(followZoomTargetPos) < stopThreshold) {\n followZooming = false;\n followZoomTargetPos = null;\n }\n }\n } else {\n if (!controlsUserInteractingRef.get()) {\n const currentOffset = camera.position.clone().sub(prevTargetWorld);\n const desired = targetWorld.clone().add(currentOffset);\n if (currentOffset.length() < 1e-6) {\n const offsetWorld = followOffset.clone();\n const camToTarget = camera.position.clone().sub(targetWorld).normalize();\n if (camToTarget.length() < 1e-6) camToTarget.set(0, 0.2, 1).normalize();\n const upComp = new THREE.Vector3(0, 1, 0).multiplyScalar(offsetWorld.y);\n const backComp = camToTarget.multiplyScalar(Math.abs(offsetWorld.z));\n const right = new THREE.Vector3().crossVectors(upComp, backComp).normalize().multiplyScalar(offsetWorld.x);\n desired.copy(targetWorld).add(upComp).add(backComp).add(right);\n }\n camera.position.lerp(desired, Math.min(1, dt * 4));\n }\n }\n controls.update();\n } else {\n controls.update();\n }\n\n renderer.render(scene, camera);\n requestAnimationFrame(animate);\n }\n requestAnimationFrame(animate);\n\n // Joystick for mobile\n let joystick = null;\n function setupJoystick() {\n const manager = nipplejs.create({\n zone: container,\n mode: 'static',\n position: { left: '16px', bottom: '16px' },\n color: 'white',\n size: 100\n });\n manager.on('move', (evt, data) => {\n if (!data || !data.vector) return;\n const vx = data.vector.x;\n const vy = -data.vector.y;\n const speed = 5e4;\n camera.position.x += vx * speed * 0.016;\n camera.position.z += vy * speed * 0.016;\n controls.target.set(0,0,0);\n });\n joystick = manager;\n }\n if (/Mobi|Android/i.test(navigator.userAgent)) setupJoystick();\n\n // WASD movement\n const keys = { w:0,a:0,s:0,d:0,ArrowUp:0,ArrowLeft:0,ArrowDown:0,ArrowRight:0 };\n window.addEventListener('keydown', e => { if (keys.hasOwnProperty(e.key)) keys[e.key]=1; });\n window.addEventListener('keyup', e => { if (keys.hasOwnProperty(e.key)) keys[e.key]=0; });\n\n function moveCameraStep() {\n const speed = 1e5 * (1/60);\n const forward = (keys.w || keys.ArrowUp) - (keys.s || keys.ArrowDown);\n const right = (keys.d || keys.ArrowRight) - (keys.a || keys.ArrowLeft);\n if (forward || right) {\n const dir = new THREE.Vector3();\n camera.getWorldDirection(dir);\n dir.y = 0; dir.normalize();\n const rightVec = new THREE.Vector3().crossVectors(camera.up, dir).normalize();\n camera.position.addScaledVector(dir, forward * speed);\n camera.position.addScaledVector(rightVec, right * speed);\n }\n requestAnimationFrame(moveCameraStep);\n }\n moveCameraStep();\n\n // expose no API currently; UI runs once configured\n}\n```\n\nSummary: I moved UI, picking, follow, animation loop, joystick and WASD input out of main.js into a new ui.js module, left tombstone comments in main.js for removed blocks, and wired main.js to call setupUI with the scene/renderer/camera/controls and bodies so functionality remains the same.","page_description","cursor","eyJpZCI6ImVhbjVydXEzeThiYXpoNHQyZW55In0","token","included",[],"about",{"_191":-5},"parent","routes/browser/layout","actionData","errors"]

Universe Explorer