Roomshift

Inspiration

Moving a sofa is a poor way to find out whether an arrangement works. I wanted to make room planning easier for people working with the belongings they already own. Roomshift focuses on trying an idea with your hands, checking its fit, and carrying a clear plan back into the real room.

What it does

Users enter measurements for one rectangular room and up to 12 furniture or art items. They can grab and reposition belongings in a tabletop model, switch to life-size view, and compare two saved arrangements with a ghost overlay. Overlap indicators and measured wall and item gaps help identify placements that need attention. Undo makes experimentation reversible, and a dimensioned 2D SVG export provides a plan to follow when moving the real furniture.

Item dimensions and positions can be edited precisely. Optional photos show the appearance of wall art; measurements always come from user input. Layouts and photos are saved locally in the browser.

How it was built

Roomshift uses Meta's Immersive Web SDK, Three.js, React, and Vite. The browser editor and immersive scene share the same validated room model, so layout changes, measurements, and undo follow the same rules in both views. An in-room panel supports hand ray and fingertip controls, including a numeric keypad for dimensions and placement.

The local prototype has been tested in desktop and mobile browsers and with IWER simulated hands. Observed simulator flows include a pinch grab, undo while an item is held, and exact measurement entry using the hand-operated keypad. Seventeen automated tests cover rotated overlap geometry, boundaries, elevated art, undo, persistence, and plan export. Physical Quest comfort and performance have not yet been tested.

Challenges and what I learned

A key challenge was keeping drag history and measurements consistent when a hand-held item is changed by another control. Each grab now forms one undo step, and undo or a layout change releases stale grabs. Testing reinforced why clearances must use rotated edges and height-aware overlaps rather than centers or axis-aligned boxes.

Future plans

The next priorities are real Quest testing, readable and comfortable hand controls, and reducing the immersive scene's download size. I will keep the first release focused on one room and existing belongings, using user-entered measurements and improving the workflow from observed use.

Built With

• react
• three.js
• typescript
• vite
• webxr