Inspiration

We were inspired by tools like the IKEA Kitchen Planner and wanted to create a similarly intuitive tool tailored for designing entire houses. Our goal was to bridge the gap between architectural planning and real-time visualization.

What it does

The House Builder tool allows users to input custom dimensions and preview a 3D model of their home. It supports switching between model styles and provides estimates like required materials and pricing.

How we built it

We used Next.js and React with Three.js via @react-three/fiber and drei for 3D rendering. Models were exported from Autodesk Inventor and converted to .glb format. Email submissions and visibility animations were added with standard React and Tailwind CSS.

Challenges we ran into

We had to deal with model rendering glitches like shadow artifacts and inconsistent camera behavior. Integrating CAD formats into the web stack was also nontrivial, especially in handling scale and pivot points.

Accomplishments that we're proud of

We successfully created an interactive and responsive 3D design tool. We implemented a model-switching UI and managed to keep everything lightweight and performant. The tool feels intuitive even for non-technical users.

What we learned

We learned how to convert CAD data into usable 3D web assets and gained experience working with Three.js. We also deepened our understanding of how to connect visual design tools with backend systems for user engagement and feedback.

What's next for Spur-AMP

We plan to expand the House Builder tool into a full-featured design-to-manufacture pipeline. This includes integrating structural constraints, exporting technical specification files like .ipt and G-code, and supporting full multi-story planning. We're also aiming to connect with fabrication systems and enable clients to go from concept to construction-ready in a single workflow.

Built With

Share this project:

Updates