This project is an immersive 3D web experience featuring the Hulkbuster armor rendered directly in the browser. It combines modern web technologies to create smooth scroll-based animations, a dynamic lighting setup, and an interactive 3D model — giving users a cinematic feel right on the web.
Best viewed on desktop devices - mobile support is currently limited.
- Fully rendered 3D Hulkbuster model using React Three Fiber
- Scroll-based animations: model rotation, movement, and reveal effects
- HDRI lighting environment for realistic reflections
- Cinematic neon intro section with glowing background
- Fade-in text blog section powered by IntersectionObserver
- Smooth UI blending between 2D content and the 3D canvas
- Fast performance thanks to Vite + R3F optimizations
- Deployed on GitHub Pages
| Technology | Purpose |
|---|---|
| React.js | UI Framework |
| Three.js | 3D rendering engine |
| React Three Fiber | React renderer for Three.js |
| Framer Motion | Scroll animations (optional) |
| Tailwind CSS | Styling |
| Vite | Build tool and bundler |
3D-Project/
│
├── public/
│ ├── ironman.glb
│ ├── hulkbuster.jpg
│ ├── script.js
│ └── other assets...
│
├── src/
│ ├── components/
│ │ └── IronManModel.jsx
│ ├── App.jsx
│ ├── App.css
│ └── main.jsx
│
└── index.html
- Clone the repo
git clone https://github.com/pushkar009/React-3D
cd React-3D-
Install dependencies
-
Run locally
-
Build for production