skip to content
reelikklemind

Passage-of-Time 时光流转

Passage of Time 时光流转 (Passage-of-Time)

Last Updated:
🌱 Seedling Information
🇨🇳 汉语文字 - 点击左边的下放箭头显示中文翻译


时光流转 (Passage-of-Time)

这款交互式 Web 应用程序在三维环境中可视化地球和月球围绕太阳的轨道路径，模拟它们随时间的螺旋运动。它使用 Three.js 进行三维渲染，为天文爱好者提供引人入胜的教育体验。

概述

  • 太阳（黄色）位于中心。
  • 地球（蓝色）以椭圆轨道围绕太阳运行，（为简化起见）每 360 天完成一次公转。
  • 月球（灰色）围绕地球运行，（为简化起见）每 30 天完成一次公转。
  • 地球轨道的灰色线条和月球轨道的橙色线条，在三维空间中模拟螺旋运动。
  • 用户可以通过播放/暂停、重置、时间滑块和速度调节功能来控制动画。

功能特性

  • 三维可视化：使用 Three.js 渲染具有螺旋轨道的三维场景。
  • 交互式控制：播放/暂停、重置、时间滑块（天数）和速度调节。
  • 星空背景：简单的星空效果，增强太空主题。
  • 可访问性：包含 ARIA 标签和键盘控制，以提高可用性。
  • 设计：针对桌面和移动设备进行了优化。

安装

要在本地运行此项目，请按照以下步骤操作：

克隆仓库

  • 如果您有该项目的 GitHub 仓库，请克隆它： 
git clone <repository-url>
cd passage-of-time

如果没有，请创建一个新文件夹并手动下载文件。

设置本地 Web 服务器

由于此项目依赖 JavaScript 和 CDN，您需要通过 Web 服务器运行它（而不是直接从 file:// 路径运行）：

  • 使用 Python（推荐用于快速设置）： 
python -m http.server 8000
  • 然后在浏览器中打开并访问 http://localhost:8000。
  • 使用 VS Code Live Server 扩展：安装 Live Server 扩展，右键单击 index.html，然后选择“Open with Live Server”。

备选方案：

  • 使用任何本地 Web 服务器（例如，使用 http-server 的 Node.js）。
  • 确保互联网连接

该项目使用 CDN 托管的 Three.js 和 OrbitControls 库，因此初次加载需要有效的互联网连接。

使用方法

  • 通过本地 Web 服务器在 Web 浏览器中打开 index.html。
  • 使用底部的控件与动画进行交互：
    • 播放/暂停按钮：开始或停止动画（也可使用空格键切换）。
    • 重置按钮：将动画重置到第 0 天（也可使用“r”键）。
    • 时间滑块（天数）：调整当前天数（0-360 天）以查看特定位置。
    • 速度滑块：调整动画速度（0.1 倍至 2 倍）。
  • 星空背景和天体（太阳、地球、月球）应可见，灰色轨道线显示其路径。
  • 点击 “播放” 查看螺旋轨道的动画。

先决条件

  • 现代 Web 浏览器（例如，Chrome、Firefox、Edge，2023 年或更高版本）并启用 WebGL。
  • 互联网连接，以便从 CDN 加载 Three.js 和 OrbitControls。

已知问题

  • 如果您看到类似 THREE is not defined 的错误，请确保您的互联网连接有效，并且 index.html 中的 CDN URL 可访问。
  • 如果 CDN 加载失败，请考虑使用 three.min.js 和 OrbitControls.min.js 的本地副本（请参阅 index.html 中的注释以获取备用说明）。
  • 如果 OrbitControls.min.js 脚本加载失败，轨道控制可能无法工作。在确认可见性之前，项目暂时在没有轨道控制的情况下运行。

贡献

  • 欢迎贡献！

致谢

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

许可证

  • 根据 GNU Affero General Public License v3.0 许可证分发。详情请参阅 LICENSE 文件。

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 and provides an engaging, educational experience for astronomy enthusiasts.

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


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.