🏢 3D Scroll3 with React Three Fiber

An immersive 3D portfolio featuring scroll-triggered animations using React Three Fiber (R3F) and GSAP. Showcases a multi-floor office model with synchronized content overlay.

Live Demo

✨ Features

• 3D Office Model

  • Multi-floor building with scroll navigation
  • GSAP-powered animations (rotation, movement, entrance effects)
  • Optimized GLTF model loading

• Interactive Overlay

  • Scroll-responsive content sections
  • Dynamic opacity transitions
  • Alternating layout design

• Tech Stack

  • 🚀 React Three Fiber + Three.js
  • 🎨 Tailwind CSS for styling
  • 📜 GSAP for advanced animations
  • 📦 Vite for blazing fast builds

🏗️ Project Structure

    /src
    ├── components
    │   ├── Office.jsx       # 3D model component
    │   ├── Overlay.jsx      # Scrollable HTML content
    │   └── Experience.jsx   # Main scene setup
    ├── assets
    │   └── models           # GLTF/GLB 3D models
    └── App.js               # Root component

🛠️ Installation

1. Clone the repository

   git clone https://git.1-hub.cnyour-username/3d-portfolio.git

2. Install dependencies

   npm install

3. Run development server

   npm run dev

🎮 Usage

1. Scroll vertically to navigate between floors

2. Watch 3D model respond to scroll position

3. View content cards with fade effects

📜 License

MIT © abdulrahmans0414