A high-performance, immersive web experience built with React Three Fiber and WebGPU, dedicated to the legendary Phoenix. This project blends cutting-edge web graphics with ancient mythology to create a unique educational and visual journey.
This application serves as a digital monument to the Phoenix, a symbol of rebirth and immortality across cultures. It leverages the latest web technologies to deliver a cinematic experience directly in the browser, featuring real-time 3D rendering and dynamic atmospheric effects.
The project utilizes the experimental WebGPU API through Three.js, offering significantly better performance and lower overhead than WebGL. This allows for complex simulations and high-fidelity visuals that were previously difficult to achieve on the web.
A custom-built God Ray (Volumetric Lighting) system simulates light scattering through the atmosphere. This effect creates a divine, ethereal glow around the Phoenix, enhancing the mystical atmosphere of the scene.
Interactive storytelling modules explore the Phoenix's presence in human history:
- History: Trace the timeline of the Phoenix from ancient stone carvings to modern pop culture.
- Origins: Deep dive into the Bennu bird of Heliopolis and the classical Greek interpretations.
- Global Myths: Compare the Persian Simurgh, the Chinese Fenghuang, and the Russian Firebird.
- Symbolism: Analyze how the Phoenix represents the cyclical nature of time and the human spirit's resilience.
A curated selection of visuals and sounds:
- Documentaries: Embedded lore from historians and mythologists.
- Ancient Song: An immersive audio track featuring the "Song of the Phoenix," intended to transport the listener to a bygone era.
A detailed 3D Phoenix model that users can interact with. The lighting and environment react in real-time to user input via the Leva control panel, allowing for a personalized visual experience.
- Framework: React
- 3D Engine: Three.js (WebGPU Renderer)
- React Integration: @react-three/fiber & @react-three/drei
- Build Tool: Vite
- UI & State: Leva for configuration controls.
- Node.js: Version 18 or higher recommended.
- WebGPU Browser: Ensure you are using a browser that supports WebGPU (e.g., Chrome 113+, Edge 113+).
-
Clone the repository:
git clone https://github.com/solobuilds/phoenix.git cd phoenix -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Build for production:
npm run build
src/components/Experience.jsx: The main 3D scene setup.src/components/Godray.jsx: Custom WebGPU Godray implementation.src/components/Phoenix.jsx: Phoenix model and animation logic.src/components/Media.jsx: Multimedia layout with video and audio.public/: Assets including models, images, and audio files.
This project is licensed under the MIT License.
"The dawn song of the Phoenix was so beautiful, the sun god Apollo would stop his chariot to listen."