Welcome to PhoenixGarage, an experimental project designed to showcase the power and simplicity of 3D web development using Next.js 14, Three.js, React Three Fiber, Drei, and Postprocessing. This project serves as an interactive playground where you can explore and experiment with 3D animations and models directly in your browser.
- 3D Model Display: Seamlessly integrates Blender models of cars and motorcycles into a Next.js application.
- Interactive Animations: Animates the 3D models based on user interactions like scrolling.
- Dynamic Lighting: Utilizes different light types to create a vibrant scene.
- Postprocessing Effects: Enhances visual quality with effects like Bloom.
- Custom Camera Controls: Smooth camera movements to provide an immersive experience.
- Easter Eggs: Hidden dragon and phoenix models for added surprise and exploration.
As a software engineer passionate about web technologies, I created this project to delve into the exciting world of 3D web development. The goal was to experiment with modern tools and frameworks, push the boundaries of what can be achieved on the web, and ultimately create a stunning showcase piece for my portfolio.
- Node.js (v16 or later)
- npm or yarn
Clone the Repository
git clone https://github.com/yourusername/phoenixgarage.git
cd phoenixgarageInstall Dependencies
npm install
# or
yarn installnpm run dev
# or
yarn devOpen your browser and navigate to http://localhost:3000 to see the project in action.
- components/: Contains The Model and Scene components.
- public/: Static files and assets, including the Blender model.
- app/: Next.js pages, including the main 3D scene.
The core of this project is displaying Blender models of cars and motorcycles using Three.js and React Three Fiber. The models are loaded and rendered within a Next.js environment, providing a seamless integration with modern React features.
The 3D models come to life with animations triggered by user interactions. Scroll through the page to see the models move, creating an engaging user experience.
We use a combination of directional light and ambient light to highlight the models and create depth in the scene. Directional lights simulate sunlight, while ambient lights provide a uniform light source.
To enhance the visual appeal, we apply postprocessing effects like Bloom. This effect adds a glowing effect to bright areas, making the scene more vibrant and dynamic.
Custom camera movements are implemented to follow a circular path, providing a smooth and immersive viewing experience. The camera always looks at the center of the scene, ensuring the models remain the focal point.
Hidden within the project are a dragon and phoenix model, adding an element of surprise and exploration for users.
- Next.js 14: The latest version of Next.js for server-side rendering and static site generation.
- Three.js: A powerful 3D library to create and display animated 3D graphics.
- React Three Fiber: A React renderer for Three.js, making 3D development declarative and component-based.
- Drei: A collection of useful helpers for React Three Fiber.
- Postprocessing: For applying visual effects to the 3D scene.
- Additional Animations: Incorporate more complex animations and transitions.
- User Interaction: Add more interactivity such as drag-and-drop or click-to-animate features.
- Enhanced Visuals: Experiment with more postprocessing effects and advanced lighting techniques.
- Performance Optimization: Continuously optimize the performance for smoother animations and interactions.
This project was inspired by various tutorials and resources on 3D web development. Special thanks to the amazing communities behind Next.js, Three.js, React Three Fiber, and Drei for their incredible work and contributions.
If you have any questions, suggestions, or just want to connect, feel free to reach out: