Passage of Time

โฌ…๏ธ Back to Projects

๐Ÿ“‹ TLDR: 3D Astronomy Visualization

  • ๐ŸŒŒ Interactive 3D Simulation: Earth, Moon, and Sun orbital mechanics in real-time
  • ๐ŸŒ€ Helical Orbits: Visualize complex 3D motion of celestial bodies over time
  • ๐ŸŽฎ Full Controls: Play/pause, speed adjustment, time scrubbing, reset functionality
  • ๐Ÿ–ฅ๏ธ Web-Based: No installation required, runs in any modern browser
  • ๐ŸŽ“ Educational: Perfect for astronomy enthusiasts and science education

Key Technologies:

  • ๐ŸŽจ Three.js for 3D rendering
  • ๐ŸŒŸ Interactive orbital mechanics
  • ๐Ÿ“ฑ Mobile-responsive design
  • โ™ฟ Accessibility features

๐ŸŒŒ Passage of Time ๆ—ถๅ…‰ๆต่ฝฌ

This interactive web application visualizes the orbital paths of the Earth and Moon around the Sun in a 3D environment, simulating their helical motion over time. It uses Three.js for 3D rendering.

Inspired by https://archive.org/details/yousciencescienc00bran/page/172/mode/1up

๐ŸŒŸ Overview

  • โ˜€๏ธ The Sun (yellow) at the center.
  • ๐ŸŒ The Earth (blue) orbiting the Sun in an elliptical path, completing one orbit in 360 days (for simplification purposes).
  • ๐ŸŒ™ The Moon (gray) orbiting the Earth, completing one orbit in 30 days (for simplification purposes).
  • ๐Ÿ”˜ Gray orbit lines for the Earthโ€™s path, and ๐ŸŸ  Orange orbit lines for the Moon’s path, simulating a helical motion in 3D space.
  • ๐ŸŽ›๏ธ Users can control the animation with play/pause, reset, time slider, and speed adjustment features.

๐ŸŽฏ Features

  • ๐Ÿ–ผ๏ธ 3D Visualization: Uses Three.js to render a 3D scene with helical orbits.
  • ๐ŸŽฎ Interactive Controls: Play/pause, reset, time slider (days), and speed adjustment.
  • โœจ Starry Background: A simple starry effect to enhance the space theme.
  • โ™ฟ Accessibility: Includes ARIA labels and keyboard controls for better usability.
  • ๐Ÿ“ฑ Design: Optimized for both desktop and mobile devices.

๐Ÿ› ๏ธ Installation

To run this project locally, follow these steps:

๐Ÿ“ฅ Clone the Repository

  • If you have a GitHub repository for this project, clone it:
git clone <repository-url>
cd passage-of-time

If not, create a new folder and download the files manually.

๐ŸŒ Set Up a Local Web Server

Since this project relies on JavaScript and CDNs, you need to serve it via a web server (not directly from file://):

  • Using Python (recommended for quick setup):
python -m http.server 8000
  • Then open your browser and navigate to http://localhost:8000.
  • Using VS Code Live Server Extension: Install the Live Server extension, right-click index.html, and select “Open with Live Server.”

Alternative:

  • Use any local web server (e.g., Node.js with http-server).
  • Ensure Internet Connection

The project uses CDN-hosted Three.js and OrbitControls libraries, so an active internet connection is required for the initial load.

๐Ÿš€ Usage

  • Open index.html in a web browser via a local web server.
  • Use the controls at the bottom to interact with the animation:
  • โ–ถ๏ธ Play/Pause Button: Start or stop the animation (also toggle with the spacebar).
  • ๐Ÿ”„ Reset Button: Reset the animation to Day 0 (also use the ‘r’ key).
  • โฐ Time Slider (Days): Adjust the current day (0โ€“360) to view specific positions.
  • โšก Speed Slider: Adjust the animation speed (0.1x to 2x).
  • The starry background and celestial bodies (Sun, Earth, Moon) should be visible, with gray orbit lines showing their paths.
  • Click “Play” to see the animation of helical orbits.

๐Ÿ“‹ Prerequisites

  • ๐ŸŒ A modern web browser (e.g., Chrome, Firefox, Edge, versions from 2023 or later) with WebGL enabled.
  • ๐Ÿ“ถ An internet connection to load Three.js and OrbitControls from CDNs.

โš ๏ธ Known Issues

  • If you see errors like THREE is not defined, ensure your internet connection is active and the CDN URLs in index.html are accessible.
  • Consider using local copies of three.min.js and OrbitControls.min.js if CDNs fail (see comments in index.html for fallback instructions).
  • Orbit controls may not work if the OrbitControls.min.js script fails to load. Temporarily, the project operates without orbit controls until visibility is confirmed.

๐Ÿค Contributing

  • Contributions are welcome!

๐Ÿ™ Acknowledgements

๐Ÿ”— Inspiration Videos

YouTube Video - Orbital Mechanics Visualization:

Bilibili Video - Space and Time Visualization:

https://www.bilibili.tv/en/video/4788698128587264?bstar_from=bstar-web.homepage.recommend.all

๐Ÿ“„ License

  • Distributed under the GNU Affero General Public License v3.0 License. See LICENSE for more information.