ModHomes

An interactive 3D web app for exploring 8 modular home designs. Orbit the exterior, place it on a real lot with Google’s 3D tiles, or walk through the furnished interior while finishes update live.

Highlights

• 3D rendering: rendered the homes in the browser with React Three Fiber and Drei, using scene staging, accumulative soft shadows, a procedural sky, and HDR environment lighting.
• Reusable model parts: built prop-driven 3D components (Module, Wall, EndWall, Roof, Foundation, Deck, Stair, SlidingDoors) that put together all 8 designs. Roof, foundation and deck sizes come from the module count and number of stories.
• Real-lot Site view: placed the home on Google’s photorealistic 3D tiles with 3d-tiles-renderer. It casts a ray to find the lot’s ground and settles the home onto it, with loading and fallback states if the map can’t load.
• Walk-through interior: a first-person view at standing eye level. You walk with WASD or the arrow keys on desktop and a joystick on touch screens, and collisions keep you out of walls and columns. The inside or outside choice is saved in localStorage.
• Furnished interiors: modeled kitchens with an island and stools, bathrooms, sliding glass walls, and an open stair with cable railings and real stair dimensions (7.5" risers, 10" treads). Clickable dots on the kitchen appliances open spec cards, and the dots fade with distance and viewing angle.
• Covered decks: added decks as modules of their own, with wood decking, slatted soffits and stairs, sliding along the home’s glass sides.
• Landscape view: projected a CC0 desert panorama onto the ground around the home, so the view through the windows shifts with real depth as you walk. Phones get a 4K image and desktops an 8K one. It’s decoded off the main thread, and the room shows first while the landscape loads in behind it.
• Finishes: built pickers for metal siding, trim and wood siding, plus floors and tile inside. Floors use textures with color, normal and roughness maps for realistic walnut, bamboo, concrete and carpet.
• Performance: drew the model page only when something changes, merged the kitchen into fewer parts to cut draw calls, and sized the textures for each device.
• Landing page: live 3D previews on the model cards that turn on hover, a hero home whose glass doors slide into place, and staggered card entrances. The floor-area counter is animated with Framer Motion springs. Animations respect the reduced-motion setting.
• Testing: 211 unit tests across 22 suites with Jest and React Testing Library, using next-router-mock for navigation.