A high-performance 3D Warehouse Layout Builder & Spatial Warehouse Management System (WMS) built for industrial logistics and supply chain digital twins. Design warehouse floors, manipulate procedural racking structures, simulate automated multi-vehicle fleet picking routes, and analyze inventory velocity heatmaps in real-time WebGL.
🔗 Live Production Demo: https://3d-warehouse-nu.vercel.app
Tip
Demo Login Credentials:
- Administrator:
admin@warehouse.local/admin12345 - Warehouse Planner:
editor@warehouse.local/editor12345 - Auditor (Read-Only):
viewer@warehouse.local/viewer12345
- Interactive 3D WebGL Canvas: 60 FPS hardware-accelerated rendering powered by Three.js and React Three Fiber with perspective, top-down 2D orthographic, and architectural projection views.
- Procedural Racking & Structural Elements: Dynamically generate and customize selective pallet racks, cantilever racks, drive-in systems, perimeter walls, dock doors, structural columns, and staging zones.
-
Multi-Floor & Mezzanine Operations: Multi-tier mezzanine floor support, vertical conveyors, freight lifts, spiral chutes, and active level floor-slicing isolation modes (
ISOLATE,GHOST_UPPER). - TSP Route Optimization & Multi-Agent Fleet Simulation: Dynamic Travelling Salesperson Problem (2-opt TSP) route calculation, multi-vehicle dispatching (Forklifts, AGVs, AMR Carts), and corridor traffic collision avoidance.
-
Enterprise WMS & Spatial Analytics: Real-time bin occupancy tracking (
Aisle-Bay-Level-Slot), max load capacity checking ($1{,}000\text{ kg} / \text{slot}$ ), ABC velocity heatmaps, and REST API routes for external ERP/WMS synchronization. -
CAD-Grade Editor & Command Pattern: Marquee box selection, AABB collision detection, face-to-face snapping, grid alignment (
$0.5\text{ m} / 1.0\text{ m}$ ), and infinite transactional Undo / Redo history. -
Role-Based Access Control (RBAC): Secure HTTP-Only session authentication with tiered roles (
ADMIN,EDITOR,VIEWER) and audit trail tracking.
| Facility Dashboard | Spatial WMS 3D Editor |
|---|---|
 |
|
| Layer | Technologies |
|---|---|
| Core Framework | Next.js 16.3 (App Router, Turbopack), React 19.2, TypeScript |
| 3D Graphics & Math | Three.js, React Three Fiber (@react-three/fiber, @react-three/drei) |
| State Management | Zustand 5 (Modular state slices + Transactional Command Pattern) |
| Styling & UI | Tailwind CSS 3.4, Lucide React Icons |
| Database & ORM | Neon Serverless PostgreSQL, Drizzle ORM 0.45 |
| Validation & Security | Zod (Runtime schema validation), Bcrypt.js, HTTP-Only Cookie Sessions |
- Node.js:
v20.0.0or higher - npm (or
pnpm/yarn) - PostgreSQL Database: Neon Serverless Postgres or a local PostgreSQL instance
# Clone the repository
git clone https://github.com/twiners212/3d-warehouse.git
cd 3d-warehouse
# Install dependencies
npm installCopy the template environment file and provide your database credentials:
cp .env.example .envInside .env:
DATABASE_URL="postgresql://user:password@ep-sample.us-east-2.aws.neon.tech/neondb?sslmode=require"
WMS_API_KEY="your-wms-secret-key"# Apply Drizzle database migrations
npm run db:migrate
# Seed default test users (Admin, Editor, Viewer)
npm run db:seed# Start local development server (with Turbopack)
npm run devOpen http://localhost:3000 in your browser.
Default seed credentials:
- Admin:
admin@warehouse.local/admin12345 - Editor:
editor@warehouse.local/editor12345 - Viewer:
viewer@warehouse.local/viewer12345
# Run typechecking
npm run typecheck
# Build optimized production bundle
npm run build
# Start production server
npm run start- Import repository on Vercel.
- Configure Environment Variables in project settings:
DATABASE_URL: Your production Neon PostgreSQL connection string.WMS_API_KEY: Secret Bearer token for external WMS integrations.
- Deploy! Next.js 16 App Router and Server Actions will be configured automatically.
3d-warehouse/
├── drizzle/ # Drizzle ORM migration files & schema snapshots
├── docs/ # Detailed technical specifications & manuals
│ ├── assets/ # High-resolution application screenshots
│ ├── architecture.md # Architectural design, data flow & rendering pipeline
│ ├── data-model.md # Relational schema & Drizzle ORM tables
│ ├── spatial-model.md # 3D coordinate mathematics & raycasting
│ └── developer.md # Engineering guidelines & test suite matrix
├── public/ # Static assets & icons
├── scripts/ # Automated verification & smoke test runners
└── src/
├── app/ # Next.js App Router (pages, layouts, Server Actions, API routes)
│ ├── actions/ # Next.js Server Actions (blueprint persistence & RBAC)
│ ├── api/wms/ # REST API endpoints for external WMS integration
│ ├── editor/[id]/ # Interactive 3D layout canvas route
│ └── login/ # Session authentication page
├── components/
│ ├── canvas/ # 3D R3F components (WarehouseCanvas, ProceduralRack, ZoneFootprint)
│ ├── editor/ # 2D editor HUD, properties inspector, toolbar, outliner
│ ├── admin/ # User management & role administration
│ └── common/ # Shared UI primitives & settings
├── engine/ # Decoupled algorithmic engine
│ ├── commands/ # Command pattern implementations (Undo/Redo)
│ ├── procedural/ # Procedural rack, bin, and zone geometry generators
│ ├── routing/ # Spatial A* pathfinding & TSP 2-opt picking optimizer
│ ├── slotting/ # ABC velocity slotting optimizer
│ └── spatial/ # AABB collision detection & grid snapping
├── hooks/ # Custom React hooks (drag controls, shortcuts, camera)
├── lib/ # Auth session logic, Zod validation schemas, i18n
├── stores/ # Modular Zustand state slices (blueprint, picking, view)
├── styles/ # Global styles and Tailwind design tokens
└── types/ # TypeScript type and interface definitions
The project includes 26 automated verification test suites covering spatial mathematics, state slice mutations, routing algorithms, and database persistence:
# Run full verification test suite
npx tsx scripts/verification-test-suite.ts
# Run picking route & TSP optimization tests
npm run test:picking
# Run multi-floor & vertical connector tests
npm run test:multi-floor-ops
# Run fleet multi-agent simulation tests
npm run test:fleet
# Run authentication & RBAC persistence tests
npm run test:rbacDistributed under the MIT License. See LICENSE for more information.