Orbital — Sun & Moon 3D Visualizer

A single-page, static web app that shows where the Sun and Moon really are in your sky right now (or at any moment within about a month from now), in 3D — plus your local sunrise/sunset, moonrise/moonset, and the Moon's current phase.

How it works

• Astronomy: all Sun/Moon positions, rise/set times, and Moon phase are computed locally in your browser using Astronomy Engine (MIT license, loaded from a CDN as a plain script — no API key, no network calls, no usage limits).
• 3D: Three.js r128, loaded from a CDN.
• Location: the browser's built-in Geolocation API. Coordinates never leave your device — everything is computed client-side. If you decline the permission prompt, you can type coordinates in manually.
• "City" label: your browser's own timezone name (e.g. Europe/Zurich), read via Intl.DateTimeFormat — no geocoding service involved, so this is approximate but completely free and local.
• Storage: none. Nothing is saved; the page is stateless.

There is no backend, no build step, and no paid service anywhere in this project.

The 3D view, explained

This is a real heliocentric layout, built directly from Astronomy Engine's position vectors (not hand-animated):

• The Sun sits fixed at the center and never moves. It's also the only light source in the scene (a point light at the origin), so everything else's shading — Earth's day/night terminator, the Moon's phase — falls out of real geometry rather than being faked.
• Earth orbits the Sun using its true heliocentric position, so over the 5-year time range you'll see it actually complete several full orbits. The blue orbit line is traced directly from real sampled positions across one year (not an idealized circle), so its slight ellipse and its tilt relative to Earth's rotation axis (the real ~23.4° axial tilt — the cause of the seasons) come straight out of the ephemeris. It also spins on its real rotation axis using the actual sidereal time. A second faint ring around Earth marks its equatorial plane, so you can compare the two tilts at a glance.
• The Moon orbits Earth using its true Earth-relative position. Its faint grey orbit line is likewise traced from real sampled positions across one sidereal month (rescaled radially to stay visible next to Earth), so its shape and its real ~5.1° inclination are genuine, not hand-drawn — and the live Moon marker's distance from Earth is varied between real perigee and apogee as it goes around.
• Earth's real rotation axis is drawn as a visible white rod through the poles (with an orange marker and "N" label at the north end), so its daily spin — and the horizon plane turning with it — has something concrete to rotate around.
• Your horizon plane (the translucent disc) is glued to your exact latitude/longitude on Earth's surface, computed from Astronomy Engine's observer vector — which already bakes in Earth's real rotation. It's deliberately huge, reaching out past the Sun's orbital distance, so its edge visibly sweeps through the Sun and Moon markers at the exact moment they rise or set (a body is "at the horizon" precisely when its direction lies in this plane) — not just a small disc near Earth. So the disc visibly spins once a day as the Earth turns, carrying the compass labels (N/E/S/W, kept close to Earth for legibility) around with it. Whatever is above the disc is currently in your sky; below it, it's beneath the horizon.
• There's also a small 2D moon-phase icon in the side panel for a quick glance, independent of the 3D view.

Five view buttons (each just re-centers the camera once when pressed — otherwise the camera is completely free to orbit, pan, and zoom wherever you like, with no automatic re-centering fighting your input):

• 🌞 Overview — pulls back to see the whole Sun/Earth/Moon layout, camera centered on the Sun.
• 🧭 North — looks straight down the world's real north-pole axis, from high above: the Sun sits dead center (it's at the scene origin), with Earth and the Moon reading as orbiting around it.
• 📍 My Sky — moves the camera near the far edge of your horizon circle, on the side away from the Sun, with a slight elevation above the plane — close enough to feel like your sky, angled enough to clearly tell whether the Sun and/or Moon are above the disc (visible) or below it (hidden) right now.
• 🌙 My Moon — looks straight at the Moon along the real Earth→Moon line, close enough to fill the frame, so its lit shape is exactly the phase you'd see from Earth right now (it's lit by the same real Sun point light as the rest of the scene, so this isn't a separate drawing — it's the same physics from a closer angle).
• 🌍 My Earth — looks at the globe from directly along your own location's "up" direction, far enough back to see the whole sphere, so your red dot automatically faces the camera.

Time slider

The slider moves simulated time from 5 years in the past to 5 years in the future, in 1-day steps — enough to watch Earth complete several real orbits around the Sun and the Moon complete dozens of real orbits around Earth. "Play" advances it automatically, at a speed you control: the "Speed" field is editable (hours per animation step, default 1h), with quick presets (1h / 6h / 1d / 1w / 1mo) for common paces. Everything (Sun/Moon position, rise/set times, phase, orbital paths) recomputes live as you drag or play.

Today summary

The bar above the 3D scene always shows, for right now (regardless of where the time slider is), whichever comes next: sunrise or sunset, and moonrise or moonset — e.g. "Sunset 19:32 (in 3h 12m)". It updates whenever your location changes.

Running it

Just open index.html in a browser — no build step, no install.

Deploying to GitHub Pages

1. Create a new GitHub repository and push these three files (index.html, style.css, script.js) to it.
2. In the repo settings, go to Pages, and set the source to the main branch, root folder.
3. GitHub will give you a URL like https://yourusername.github.io/your-repo-name/ — open that on your phone or computer.

Known limitations (by design, to keep this simple)

• Rise/set search looks in a ±12h window around the selected time, which works everywhere except very close to the poles, where the Sun or Moon can stay up or down for days — in that case rise/set may show —.
• Distances in the 3D scene are not to real scale (the Sun would be thousands of times farther away than the Moon in reality) — directions and phase are physically accurate, but the layout is a schematic, sized for legibility, not scale.