Galaxy Visualization

An interactive 3D galaxy visualization built with React and Three.js, exploring spiritual themes through cosmic representations.

Features

• Interactive Galaxies: Click on galaxy nodes to explore different spiritual themes
• Solar Systems: Detailed solar systems representing personal growth, relationships, and life transitions
• Responsive Camera: Camera automatically adjusts aspect ratio on window resize for optimal viewing
• Bloom Effects: Post-processing bloom effects for enhanced visual appeal
• Orbit Controls: Navigate the 3D space with mouse controls and zoom

Themes Explored

1. Personal Growth & Inner Conflicts

   • Self-Awareness & Mindfulness
   • Ego, Identity, and Detachment
   • Guilt, Shame & Forgiveness
   • Fear, Doubt & Faith
   • Purpose and Meaning
   • Healing from Trauma

2. Relationships & Connection

   • Love & Compassion
   • Boundaries & Energy Exchange
   • Family & Generational Patterns
   • Friendship, Community & Loneliness
   • Romantic Relationships & Soul Connections

3. Life Events & Transitions

   • Birth, Death & Grief
   • Loss, Failure & Renewal
   • Career, Success & Spiritual Purpose
   • Health Crises & Recovery
   • Midlife Awakening / Dark Night of the Soul

Installation

1. Clone the repository
2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Usage

• Use mouse to orbit around the scene
• Scroll to zoom in/out
• Click on galaxy nodes to transition to their solar systems
• Resize the window to see the camera adapt automatically

Technologies Used

• React: UI framework
• Three.js: 3D graphics
• React Three Fiber: React renderer for Three.js
• React Three Drei: Useful helpers for React Three Fiber
• React Three Postprocessing: Post-processing effects
• Vite: Build tool and development server

Development

This project uses Vite for fast development and building. ESLint is configured for code quality.

To build for production:

npm run build

To preview the production build:

npm run preview