Parametric Furniture CAD

A 3D parametric furniture design application built with React 19, Three.js, and TypeScript. Visualize, customize, and generate cut lists for furniture projects — all in the browser.

Overview

Parametric Furniture CAD is a web-based parametric furniture designer that lets you create 3D furniture models from adjustable templates. Adjust dimensions, materials, joinery, and styles in real-time while viewing the result in a full 3D viewport. Generate detailed Bills of Materials (BOM) and optimized cut lists for woodworking projects.

Built with: Vite 7 + React 19 + TypeScript + Three.js + React Three Fiber + Zustand + shadcn/ui + Framer Motion

Features

Parametric Furniture Templates

• Standard Table — 4 legs, 4 aprons, configurable top (slats/sheet/plank), multiple joinery options
• Utility Shelf — 2 uprights, adjustable shelf count, multiple side styles
• Heavy Workbench — 4×4 legs, heavy top, lower shelf
• Trestle Table — A-frame legs with center stretcher

Real-Time 3D Viewport

• Full 3D scene with OrbitControls (pan, zoom, rotate)
• Physically-based lighting with shadows
• Grid floor and contact shadows
• Click-to-select individual parts
• Studio environment background

Part & Assembly Management

• Select and inspect individual parts (legs, aprons, tops, shelves)
• View part dimensions, profiles, materials, and grain direction
• Visual connector display (pocket screws, mortise & tenon, figure-8 fasteners, levelers)

Stock Library Browser

• Dimensional Lumber — 1×2 through 6×6 nominal sizes with actual dimensions
• Sheet Goods — Plywood, MDF, OSB, Melamine in ¼" to ¾" thicknesses
• Material properties (density, elastic modulus) for SPF, oak, maple, cedar, and more

Bill of Materials (BOM)

• Automated parts list grouped by material and profile
• Quantity, total length, and individual cut dimensions
• Category breakdown (lumber, sheets, hardware)
• Cut grouping by length for optimization

Cut List Generator

• Optimized cutting layouts with waste calculation
• Kerf allowance (⅛" per cut)
• 15% waste factor for safety
• Automatic stock length selection (8'/10'/12')
• Waste percentage per stock item

Drawing Tools

• Multi-view drawings (plan, front, side, section, exploded)
• Configurable scale, line weights, dimension display
• Imperial (inches/feet) and metric (mm) unit systems

Getting Started

Prerequisites

• Node.js 20+
• npm, pnpm, or yarn

Installation

# Install dependencies
npm install

# Start the development server
npm run dev

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

Build for Production

npm run build

Output will be in the dist/ directory.

Available Scripts

Script	Description
npm run dev	Start Vite dev server with HMR
npm run build	Type-check then build for production
npm run lint	Run ESLint across the project
npm run preview	Preview the production build

Tech Stack

Category	Technology
Framework	React 19, TypeScript
Build Tool	Vite 7
3D Rendering	Three.js, @react-three/fiber, @react-three/drei
State Management	Zustand v5
UI Components	shadcn/ui (Radix primitives)
Styling	Tailwind CSS 3 with tailwindcss-animate
Animations	Framer Motion v12
Forms	React Hook Form + Zod
Charts	Recharts
Utilities	uuid, clsx, class-variance-authority, date-fns

Project Structure

src/
├── components/
│   ├── three/
│   │   ├── Viewport3D.tsx      # 3D canvas with lighting and controls
│   │   ├── AssemblyRenderer.tsx # Renders furniture assembly in 3D
│   │   └── WoodMaterial.tsx    # Realistic wood material shader
│   ├── panels/
│   │   ├── LeftSidebar.tsx     # Template selector + stock library
│   │   ├── RightSidebar.tsx    # Part properties panel
│   │   ├── BOMPanel.tsx        # Bill of Materials overlay
│   │   └── CutListPanel.tsx    # Cut list overlay with waste calc
│   ├── BottomToolbar.tsx       # Bottom tool controls
│   ├── PartTooltip.tsx         # Hover tooltip for parts
│   ├── StatusBar.tsx           # Status bar with info
│   ├── Navbar.tsx              # Top navigation bar
│   └── ui/                     # shadcn/ui components
├── hooks/
├── store/
│   └── useStore.ts             # Zustand store with BOM/cut list selectors
├── data/
│   ├── templateEngine.ts       # Parametric assembly generators
│   └── stockLibrary.ts         # Lumber and sheet profiles + utilities
├── types/
│   └── index.ts                # TypeScript type definitions
├── App.tsx                     # Root layout component
└── main.tsx                    # Application entry point

Architecture

Parametric Engine

The template engine (data/templateEngine.ts) generates complete furniture assemblies from parameter objects. For example, a table assembly is procedurally built by:

1. Calculating leg positions from width/depth
2. Computing apron lengths from leg positions and inset
3. Generating the top (slats, sheet, or plank array)
4. Optionally adding a lower shelf with cleats
5. Adding connectors based on joinery type

All parts are computed in inches and positioned in 3D space for direct rendering.

State Flow

User adjusts parameters (RightSidebar)
  → useStore.updateParameter()
    → generateTableAssembly/GenerateShelfAssembly()
      → new Assembly with updated parts
        → Viewport3D re-renders via Zustand subscription
        → BOM and Cut List selectors recompute

Stock Library

Real-world lumber and sheet dimensions are stored in data/stockLibrary.ts with actual (not nominal) measurements, prices, and material properties. All profiles are indexed by ID for template engine lookups.

Notes

• Dimensions are in inches (imperial) by default; metric conversion is supported
• The app is purely client-side with no backend dependencies
• Part selection in the 3D viewport highlights and surfaces detailed properties in the right sidebar
• Templates are extensible — new template types can be added by implementing the Assembly interface

Troubleshooting

For debugging common issues, see docs/TROUBLESHOOTING.md for solutions to:

• 3D viewport black screen or controls not working
• State not updating after parameter changes
• Performance problems and slow load times
• Accessibility and keyboard navigation issues
• Build and deploy failures