https://github.com/ehsanidev/virtual-observatory
a simple yet immersive simulation of a night sky using Three.js, a popular JavaScript library for creating and rendering 3D graphics in a browser. This project provides an interactive experience where users can explore a simulated star field, with added interactive elements.
https://github.com/ehsanidev/virtual-observatory
threejs threejs-learning
Last synced: 6 months ago
JSON representation
a simple yet immersive simulation of a night sky using Three.js, a popular JavaScript library for creating and rendering 3D graphics in a browser. This project provides an interactive experience where users can explore a simulated star field, with added interactive elements.
- Host: GitHub
- URL: https://github.com/ehsanidev/virtual-observatory
- Owner: ehsanidev
- Created: 2025-03-09T20:18:09.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-06-29T23:08:10.000Z (7 months ago)
- Last Synced: 2025-06-29T23:30:15.036Z (7 months ago)
- Topics: threejs, threejs-learning
- Language: JavaScript
- Homepage: https://ehsanidev.github.io/virtual-observatory/
- Size: 1.53 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Virtual Observatory - README
Welcome to the **Virtual Observatory** project, a simple yet immersive simulation of a night sky using Three.js, a popular JavaScript library for creating and rendering 3D graphics in a browser. This project provides an interactive experience where users can explore a simulated star field, with added interactive elements like surprise messages when clicking on the screen.
## Project Overview
This project creates a basic 3D environment mimicking an observatory's view of the night sky. Key features include:
- **Star Field**: A vast field of stars randomly positioned to simulate the night sky.
- **Interactive Elements**: Clicking anywhere on the screen triggers a surprise message.
- **Dynamic Movement**: The star field rotates slowly to create a sense of movement in space.
## Getting Started
To run this project, you'll need a modern web browser with JavaScript enabled. Here's how you can set it up:
1. **Clone the Repository**:
```bash
git clone [your-repo-url]
cd virtual-observatory
```
2. **Open the HTML File**: Navigate to the project directory and open `index.html` in your web browser.
```bash
open index.html
```
or simply double-click `index.html` if your file explorer supports this.
## Project Structure
- **index.html**: The main HTML file that loads the JavaScript.
- **js/script.js**: Contains all the Three.js logic for setting up the scene, camera, renderer, and animations.
- **css/style.css**: Basic styling for the HTML to ensure full-screen display and text styling.
## Code Explanation
### Scene Setup
- A scene is created with a black background to simulate the night sky.
### Camera Setup
- A perspective camera is used with a field of view of 75 degrees, adjusted to the window's aspect ratio.
### Renderer Setup
- WebGL renderer is used with antialiasing for smoother graphics, sized to fit the browser window.
### Star Field
- A `BufferGeometry` is used for efficiency, with 10,000 stars positioned randomly within a cube of 2000 units side length.
- Stars are rendered as points with white color.
### Animation
- The `animate` function uses `requestAnimationFrame` for smooth animations, rotating the star field slightly each frame to give a sense of motion.
### Event Handling
- **Resize Event**: Adjusts the camera and renderer when the window size changes.
- **Click Event**: Adds a fun interactive element where clicking the screen shows a temporary "You Found Me!" message at the click position.
## How to Enhance
- **Add More Objects**: Consider adding models like telescopes, observatory domes, or planets.
- **Improve Interaction**: Enhance user interaction by adding more educational content or interactive star charts.
- **Customize Stars**: Use different colors or sizes for stars to simulate different star types or add constellations.
## Dependencies
This project uses:
- **Three.js** (version 0.150.1) for 3D graphics. The library is loaded directly from a CDN in the script.
## License
This project is open source and available under the [MIT License](LICENSE). Feel free to use, modify, and distribute as per the license terms.
## Acknowledgements
- Three.js community for providing a powerful and easy-to-use 3D library.
- The open-source community for inspiration and resources.
Enjoy exploring the virtual cosmos! If you have any questions or suggestions, feel free to open an issue or contribute to the project.