Experience your file system in 3D space — browse, manage, and interact with files in an immersive environment.
Demo • Features • Architecture • Getting Started • Tech Stack
3D File Explorer — Navigate your files in an interactive 3D space |
Landing Page — Clean, immersive onboarding experience |
💡 Note: This is a portfolio/demo version running on mock data. It does not connect to a real backend server.
| 🗂️ 3D File Explorer |
🎯 Drag & Drop |
🧭 Folder Navigation |
🖼️ File Preview |
🎥 Camera Controls |
| Browse files and folders rendered as interactive 3D nodes | Move files between folders with intuitive drag-and-drop | Traverse hierarchical folder structures seamlessly | Preview file metadata and contents on click | Zoom, pan, and rotate the 3D camera freely |
3Drive/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ ├── login/ # Login page
│ ├── signup/ # Signup page
│ ├── example/ # Demo/example page
│ ├── layout.tsx # Root layout
│ └── page.tsx # Landing page
├── ui/ # UI layer
│ ├── Components/
│ │ ├── 3d-components/ # Three.js 3D components
│ │ ├── context/ # React Context providers
│ │ ├── hooks/ # Custom React hooks
│ │ ├── finder.tsx # File finder component
│ │ ├── global-nav.tsx # Global navigation
│ │ ├── side-nav.tsx # Side navigation panel
│ │ └── onboarding.tsx # Onboarding flow
│ ├── MainPage/ # Main 3D page views
│ ├── LoginPage/ # Login UI
│ └── Modal/ # Modal dialogs
├── lib/ # Core utilities
│ ├── file-model.tsx # File 3D model
│ ├── folder-model.tsx # Folder 3D model
│ ├── root-model.tsx # Root node model
│ ├── logo-model.tsx # Logo 3D model
│ ├── positioning.ts # Node positioning logic
│ ├── tree-utils.ts # File tree utilities
│ ├── sample-tree.ts # Mock data tree
│ └── angles.ts # Angle calculations
├── backend/ # Backend logic
│ └── account-actions.ts # Auth actions
├── types/ # TypeScript type definitions
└── public/ # Static assets (models, textures)
Rendering Pipeline
graph LR
A[File Tree Data] --> B[tree-utils.ts]
B --> C[positioning.ts]
C --> D[3D Node Layout]
D --> E[React Three Fiber Scene]
E --> F[WebGL Rendering]
F --> G[Interactive 3D Explorer]
Prerequisites: Node.js 18+ and npm
# 1. Clone the repository
git clone https://github.com/your-id/3Drive.git
cd 3Drive
# 2. Install dependencies
npm install
# 3. Start the development server
npm run dev
# 4. Open in browser
open http://localhost:3000| Category | Technologies |
|---|---|
| Framework | Next.js 15, React 19 |
| 3D Rendering | Three.js, React Three Fiber, React Three Drei, Postprocessing |
| Animation | Framer Motion, GSAP |
| Styling | Tailwind CSS 4 |
| Auth | NextAuth.js, bcryptjs, JWT |
| UI Components | Radix UI, SweetAlert2, React Hot Toast |
| Language | TypeScript 5 |