RoomWalk

Overview

I wanted to know what an apartment would actually feel like before signing a lease, and every tool I tried was either a wireframe-y CAD program built for architects or a kid’s room planner that could not handle a real floor plan. RoomWalk sits in the middle. Upload a 2D plan (or start from a blank grid), trace the walls or let auto-detection do a first pass, drop in doors, windows, and to-scale furniture, then flip into 3D and walk through the room like a Sims sandbox.

The whole thing is pure static files. No build step, no bundler, no framework. three.js is vendored locally instead of pulled from a CDN so the app keeps working even if a CDN goes down or changes versions on me. Central state lives in a tiny pub/sub: the 2D editor and the 3D walker both subscribe and re-render on emit(), which keeps the two views in lockstep without an MVC layer between them.

Auto-detection runs on uploaded plans to find walls and openings, but every detected element is editable. The philosophy is “auto-detect plus manual fallback” — the computer does its best, then I clean up. Furniture and wall-mounted items snap to scale, collide with walls and each other, and respect openings.

It is hosted on Cloudflare Pages with a _headers file that disables caching so returning visitors never see a stale build. Push to main and a new version is live in about a minute.

Key Features

• Upload a 2D floor plan (PDF, image) or start from a blank grid
• Auto-detect walls and openings with manual override on every element
• To-scale furniture and wall-mounted item library with collision detection
• Floor and wall styling (textures, colors)
• 3D walk mode for first-person navigation through the finished room
• Vendored three.js with no CDN dependency
• Pure static, no build step

Tech Stack

• Vanilla JavaScript (ES modules)
• three.js (vendored under vendor/three/)
• HTML Canvas for the 2D editor
• Cloudflare Pages for hosting