← projects

Risenroom

Next.js, Three.js, OpenAI

open project →watch the demo →view the code →

the problem

Current image generation models cannot generate room renders straight from a floorplan that respect proportions, furniture placement or spatial logic, which is a big deal when the render is going in front of a client.

the other half of the story

Those models are excellent at taking an existing render and making it beautiful. So the trick is not to generate the room from scratch, it is to give the model something real to work from.

what I built

Risenroom turns the floorplan into a rough 3D scene you can actually walk through, lets you pick the exact point of view you want, and then generates as many finished room renders as you like from there — always respecting the parameters professionals care about.

how it works

The first thing to do is upload the floorplan and place a camera on it: a marker showing where you are standing and which way you are looking.

Then an AI model, in this case OpenAI's latest, GPT-6 Astra, generates a 3D representation of the whole floorplan: every room, wall, door and window, furnished. The model doesn't output a picture, it outputs Three.js code. It first measures the plan and writes the walls, openings, rooms and furniture down as data, in meters, and only then builds the meshes from that data. That is what keeps the geometry faithful to the plan, instead of something that just looks plausible.

In the second step you can explore the 3D scene as much as you want: walk through it at eye height, jump from room to room, or fly up for a dollhouse view from above, looking for the best view.

Once you are satisfied with the view, you describe the room you want in your own words — style, materials, colors, lighting, mood — and hit generate. Risenroom takes a screenshot of exactly that view and hands it, together with the floorplan, to OpenAI's image model, gpt-image-2. The model keeps the walls, openings, camera and furniture layout exactly as they are, and turns the plain blocks into a photorealistic room render. If your description asks for a structural change, like knocking down a wall, that part is ignored: the architecture is the client's real home.

the result

Professionals can now generate as many room renders as they want, always respecting the parameters they care about. The tool is open source: the code is on GitHub.

what I learned

This project improved my skills with Three.js and AI models, and taught me how to use them to create a product that is useful and easy to use.

the stack

app — Next.js, React, TypeScript and Tailwind CSS, with Zustand holding the state of the four steps: upload, camera, 3D scene, render.

3D scene — Three.js running in a sandboxed iframe. A small harness sets up the renderer, camera, shadows and the walk and fly controls, and the model's code only fills the scene.

AI — OpenAI: gpt-6-astra writes the Three.js scene from the floorplan, gpt-image-2 turns a screenshot of the scene into the final render.

landing page — the contact form saves sign-ups to a Notion database through the Notion API.