Interactive 3D Room Planner & Furniture Configurator Developer (Three.js / WebGL)

I want to launch a browser-based room planner that feels as fluid as a native design tool. Visitors will be able to start from either a predefined room template or enter their own dimensions, then drag-and-drop furniture, rotate and resize it, and swap materials or colours on the fly. Walls, floors, and entire furniture sets must respond instantly to changes so the customer always sees a true-to-life preview.

I have chosen the Three.js / React Three Fiber stack because I need WebGL performance without sacrificing React’s component model. Smooth camera controls, accurate collision detection, and real-time lighting are all essential to keep the experience realistic and engaging.

Core requirements
• Dual room setup: selectable templates plus fully custom width, depth, and height input.
• Full style palette: wall colour & texture, flooring options, and multiple furniture styles available through a JSON-driven catalogue.
• Object interactions: drag & drop placement, freeform rotation, uniform and non-uniform scaling, plus dynamic material swapping.
• Optimised loading: progressive asset streaming so large models never block interaction.
• State export: user designs must save to JSON for later editing or to generate a branded PDF snapshot.

Acceptance criteria
1. A responsive web app that runs smoothly on modern desktop and mobile browsers (60 fps on mid-range hardware).
2. No visible artefacts when switching materials; PBR textures should update in real time.
3. All transformations respect room boundaries, with snap-to-wall and grid options.
4. Clean, documented React components and modular Three.js helpers ready for hand-off to my internal team.

If you have shipped similar product configurators or architectural visualisers, I would love to review a live link or repo. Let’s build a planner that shoppers will actually enjoy using.