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
- nextjs
- python
- tkinter
Log in or sign up for Devpost to join the conversation.