Garage Planner: From 3D to DIY

An interactive 3D tool I built to test garage layouts, move storage and equipment around, and estimate materials and costs before turning the plan into a finished renovation.

Explore the project

See it in action

Navigate the proposed layout in 3D before moving anything in the garage. The garage door is hidden for a clear view inside.

The Challenge

Our garage needed to hold family gear, bikes, tools, a freezer, and a growing pile of storage totes while still leaving room to move and work. A shelving shopping list could not answer the important questions: would the layout fit around the office and doors, could I reach the things I actually use, and what would each option require in materials and money? I wanted to test those decisions before buying furniture or starting the physical work.

The Solution

I built a browser-based 3D garage planner with an AI-assisted development workflow. It models the garage and its office footprint, then lets me add dimensioned shelving, cabinets, workbenches, totes, and bulky equipment from a catalog. I can drag items, rotate them, snap them to walls, and place them on shelves or work surfaces. Orbiting, panning, and zooming make the layout easy to inspect from different angles. A top-down view and vehicle and bike overlays help test floor space, while clearance and clash readouts surface problems as the scene changes. The same layout drives an itemized storage estimate, with a wall-finish toggle adding a drywall materials allowance. Alongside the planner, I generated wall elevations and drywall cutting studies to turn the chosen layout into a practical work sequence. The tool became the bridge between exploring options on a screen and renovating the garage with my dad.

A closer look

The garage planner interface with a dimensioned item catalog, placement controls, clearance readout, and itemized storage and drywall estimates beside the 3D layout. — Add and reposition dimensioned items, then inspect clearances and the changing estimate. Prices and wall-finish allowances shown are historical planning assumptions.

The planner's top-down view showing the office footprint, back-wall shelving, right-wall cabinets and workbenches, and central floor space. — Switch to the plan view to inspect how storage uses the floor around the existing office.

A close view of three tote-filled BROR bays and a fourth bay for bulky equipment in the 3D planner. — Three bays for collections of smaller objects; one for bulky gear. The shelf layout models six 27-gallon, six 17-gallon, and six 5-gallon totes.

Drywall wall elevations showing a six-sheet planning study, framing references, full-height panels, reused offcuts, and added seam backing. — A separate generated wall-elevation study connected the layout to drywall planning. Six available sheets prioritized the right and back walls, with the person-door wall deferred.

A diagram showing how six drywall sheets were divided into right-wall panels and reused back-wall pieces. — The corresponding cutting map made offcut reuse visible. This is a planning artifact, not a record of every final cut.

The Outcome

The garage renovation is complete. The planning work produced a reusable interactive tool, a four-bay BROR storage layout, a cabinet and workbench run, itemized cost and material estimates, and drywall cutting diagrams that supported the physical build. The useful outcome was being able to inspect a change, see its spatial and purchasing implications, and make the next decision before committing to it in the garage. The portfolio demo preserves that planning workflow. Its prices and construction allowances are historical estimates rather than the final project spend.

Tech Stack

Three.js
JavaScript
HTML/CSS
3D Planning