Solar System VR/AR Visualization Project

This project is an interactive 3D Solar System visualization developed using A-Frame, AR.js, WebGL, and WebXR. It supports both Virtual Reality (VR) and Augmented Reality (AR) modes and was created as part of my CS560 course project.

---

🚀 Features

• Full 3D Solar System simulation
• Planet rotation & revolution animations
• VR mode with WebXR (A-Frame)
• AR mode using marker-based AR.js
• Independent pages for each planet
• Runs entirely in the browser (no installation required)

---

🎯 Project Motivation

Understanding planetary scale, space, and orbits through 2D images is difficult. This project uses immersive VR and AR to make the Solar System more intuitive, interactive, and educational. It is intended for demos, teaching, and experimentation with XR (Extended Reality) technologies.

---

🛠️ Technologies Used

• A-Frame
• AR.js
• WebXR
• WebGL
• HTML / CSS / JavaScript

---

📦 How to Run This Project

The project runs entirely in a web browser. No installation or command-line tools are required.

---

▶️ 1. Run the Main Solar System (Normal Mode)

1. Download or clone the project: git clone https://github.com/dmrworse007/cs560project

2. Open the project folder.

3. Double-click on: index.html

This opens the full Solar System model with orbits and animations.

---

🟩 2. Run Augmented Reality (AR) Mode

1. Open: solar.html

2. Use a device with a camera (laptop webcam or smartphone).

3. Point the camera at a HIRO marker (standard AR marker).

4. The 3D planets will appear on top of the marker using AR.

If the AR marker is not available, you can print one online by searching “HIRO marker PNG”.

---

🔵 3. Run Virtual Reality (VR) Mode

1. Open any HTML file inside the: vr/
   folder.

2. You can use:
   • Desktop browser (mouse controls)
   • Mobile phone inserted into a VR headset (Google Cardboard style)
3. A-Frame automatically activates VR mode when supported.

---

📱 4. Run on Mobile (Android / iPhone)

1. Upload the project to GitHub Pages (instructions below).
2. Open the link on your phone.
3. AR mode will ask for camera permission — allow it.

---

🌐 5. Running Through GitHub Pages (Recommended)

After enabling GitHub Pages, your project will be available at:

https://dmrworse007.github.io/cs560project/

Then:

• Open /index.html → Normal mode
• Open /solar.html → AR mode
• Open /vr/*.html → VR mode

---

🧪 6. Testing Tips

• Use Chrome or Edge (best compatibility).
• For AR: ensure lighting is good and camera can see the marker.
• For VR: use fullscreen + VR headset for best results.

👨‍💻 Author

Dibya Pratim Kashyap
CS560 Project – IIT Guwahati
GitHub: https://github.com/dmrworse007

🔧 Git Commands for Updates

git add . git commit -m “Update project” git push

---