A modern, open-source 3D floor planner built with Three.js and TypeScript. Blueprint3D Modern is a complete rewrite of the classic blueprint3d library as a clean ES module, paired with a production-ready Next.js 15 demo application featuring local IndexedDB storage — no backend required.

Live Demo →

3D view with real-time context menu for item dimensions

Furniture catalog with categorized browsing

• 2D/3D View Toggle — Switch between a top-down floorplan editor and an interactive 3D perspective
• Wall Drawing — Draw, move, and delete walls with snapping and measurement overlays
• Furniture Placement — Drag-and-drop items from a categorized catalog (beds, sofas, tables, chairs, wardrobes, lights, storage, doors, windows, bathroom fixtures, and more)
• Item Controls — Resize, rotate, and lock items in place; real-time dimension display in any unit
• Texture Customization — Apply floor and wall textures per room surface
• Room Templates — Start from a blank canvas or pre-built room layouts
• Save & Load — Persist floor plans to browser IndexedDB — no account, no server
• My Floor Plans — Browse, load, and delete saved designs with thumbnail previews
• Multi-language — Built-in i18n support: English, 简体中文, 繁體中文
• Unit System — Inches/feet, meters, centimeters, or millimeters
• Responsive — Works on desktop and touch devices

blueprint3d-modern/
├── src/                        # Core library (TypeScript + Three.js)
│   ├── blueprint3d.ts          # Main Blueprint3d class
│   ├── constants.ts
│   ├── core/                   # Utils, configuration, dimensioning, events
│   ├── model/                  # Floorplan, Corner, Wall, Room, Scene
│   ├── items/                  # Item types (floor, wall, in-wall, etc.)
│   ├── three/                  # Three.js renderer, controller, HUD, lights
│   ├── floorplanner/           # 2D canvas floorplan editor
│   ├── loaders/                # OBJ/MTL model loader
│   ├── indexdb/                # Template persistence via IndexedDB
│   ├── types/                  # Shared TypeScript types
│   └── templates/              # Built-in JSON room templates
│
├── app/                        # Next.js 15 demo application
│   ├── app/[locale]/           # Locale-aware routing (en / zh / tw)
│   ├── components/
│   │   ├── blueprint3d/        # All UI components (20+)
│   │   └── ui/                 # shadcn/ui base components
│   ├── services/
│   │   └── storage.ts          # IndexedDB CRUD (replaces any backend API)
│   ├── messages/               # i18n JSON files (en, zh, tw)
│   ├── i18n/                   # next-intl routing & request config
│   ├── hooks/                  # use-window-size, use-media-query
│   ├── stores/                 # Zustand stores
│   ├── lib/                    # utils, constants, blueprint-templates config
│   └── types/                  # Blueprint type definitions
│
└── docs/                       # Screenshots and assets

• Node.js 18+
• pnpm 8+

git clone https://github.com/charmlinn/blueprint3d-modern.git
cd blueprint3d-modern

# Install root dependencies (core library)
pnpm install

# Install app dependencies
cd app && pnpm install

# From repo root
pnpm dev

# Or directly in app/
cd app && pnpm dev

Open http://localhost:3000 in your browser.

cd app && pnpm build

The src/ directory is a standalone TypeScript library that can be used independently of the Next.js app.

import { Blueprint3d } from './src/blueprint3d'

const blueprint = new Blueprint3d({
  floorplanContainer: 'floorplan',   // 2D canvas container id
  threeContainer: 'three',           // 3D canvas container id
  textureDir: '/textures/'
})

// Load a saved floor plan
blueprint.model.loadSerialized(jsonString)

// Save the current state
const json = blueprint.model.exportSerialized()

Floor plans are persisted entirely in the browser using IndexedDB — no server or account needed.

import { blueprintStorage } from '@/services/storage'

// List all saved floor plans
const plans = await blueprintStorage.list()

// Save a new floor plan
const plan = await blueprintStorage.create({
  name: 'My Bedroom',
  roomType: 'bedroom',
  layoutData: blueprint.model.exportSerialized(),
  thumbnailBase64: canvas.toDataURL()
})

// Load a floor plan
const plan = await blueprintStorage.get(id)

// Delete a floor plan
await blueprintStorage.delete(id)

Database: blueprint3d_floorplans · Store: floorplans

The app uses next-intl with three built-in locales:

Translation files live in app/messages/{locale}.json. To add a new language, add the locale to app/i18n/routing.ts and create the corresponding messages/{locale}.json.

Note on Three.js r0.181: This release uses the new WebGPURenderer path for optional GPU acceleration. Blueprint3D Modern still uses the stable WebGLRenderer — the three/examples/jsm ESM imports are resolved via webpack alias to ensure the app's local node_modules copy is always used, avoiding version mismatches when src/ sits outside the Next.js app directory.

Items marked ✅ are shipped. Everything else is planned or open for contribution.

• ES module rewrite (no more globals / jQuery)
• TypeScript strict types throughout
• Three.js r0.170+ compatibility (BufferGeometry, WebGLRenderer)
• anime.js v4 camera animation
• IndexedDB template store
• Vite build output — publish src/ as a proper npm package (blueprint3d-modern)
• Unit tests for model layer (Floorplan, Corner, Wall graph)
• GLB/GLTF model support alongside OBJ/MTL
• Undo / Redo history stack
• Wall thickness configuration per wall
• Multi-room / multi-floor support

• Next.js 15 App Router with [locale] routing
• IndexedDB storage (save / load / delete — zero backend)
• Thumbnail generation on save
• Dark mode (CSS variables)
• 3 locales: en / zh / tw
• Export floor plan as PNG / SVG / PDF
• Import floor plan from JSON file
• Drag-to-reorder saved floor plans
• Duplicate an existing floor plan
• Share floor plan via URL (base64-encoded state or short link)
• More room templates (kitchen, bathroom, office, studio)
• More furniture items and texture packs
• Mobile touch gesture improvements (pinch-zoom, two-finger pan)
• Keyboard shortcuts cheat sheet

• Publish core library to npm
• Add Storybook for UI component catalog
• GitHub Actions CI (type-check + build on every PR)
• Vercel / Netlify one-click deploy button

Contributions are welcome! Please open an issue or pull request.

1. Fork the repository
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit your changes
4. Push and open a Pull Request

MIT © charmlinn

See LICENSE for full text.