My Blog

Can it all fit? I built a photo-to-3D suitcase packer

Every trip starts with the same optimistic claim: it’ll all fit. I usually find out otherwise an hour before leaving, sitting on a suitcase that refuses to zip. So I built Knapsack, a web app that settles the question before the packing starts. You give it photos of the things you actually travel with, it turns each one into an editable 3D object, and then it packs your suitcase while you watch. It’s a Next.js app and the whole scene runs on React Three Fiber, so the solver, the renderer, and your inventory all live in the browser.

Knapsack landing page with an open 3D suitcase

The pipeline has three stages. A photo goes to an /api/analyze route on the server, which forwards it to OpenAI (gpt-6-astra by default, configurable through OPENAI_MODEL) and receives a low-poly mesh back: colored vertices, triangle indices, materials. The mesh gets validated, then three.js renders it both inside the suitcase and in a per-item editor where you can scale and reshape it. The looks are separated from the math on purpose: every item also carries a conservative rectangular envelope, and a solver in a Web Worker searches for an arrangement that respects bounds, clearances, allowed rotations, and the two-compartment layout. A separate validator re-checks every plan before the UI shows it, and inventory plus photos autosave to IndexedDB.

The packing workspace with a demo inventory, a packed suitcase, and the item editor

The part I care about most is that your corrections actually change the plan. An AI-estimated size is a guess, so every item has sliders for size, a compression control for folded clothes, rotation toggles, and drag placement for when you want the shoes in a specific corner. Each edit bumps a revision, stale solver results get dropped, and the scene repacks around your changes. When something genuinely doesn’t fit, the app computes alternatives instead of shrugging: pin the charger as essential, ask for make-room options, and it shows exactly which items would stay home before you commit to anything.

Top down view of the computed packing plan across both compartments

It’s an estimate, not physics, and the app is upfront about that. The meshes are low-poly approximations, the search is a bounded heuristic, and a failed search doesn’t prove the bag can’t close. What you get is a fast spatial answer you can argue with, which beats my floor at 5am. Most of the browser testing ran through Kane CLI, which generated the packing journeys and caught real bugs while I built it. If you want to poke at it, the live workspace is at knapsack.pontrolcanel.top/pack and the Load demo button drops in a sample inventory, no photos of your socks required.

The landing animation with the suitcase fully packed

#projects

Reply to this post by email ↪